stack children is overflowing on image - flutter

Question

I clip to hardedge in stack even after this black container is overflowing how can i fix this if i do fit: BoxFit.fill the image get stretched. i tried wrapping the stack in a container or card and then clip to haredge that didnt work too
here is the code i tried
Stack(
children: [
Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
image: DecorationImage(
image: AssetImage(widget.image), fit: BoxFit.fill),
),
),
Positioned(
left: 0,
right: 0,
bottom: 0,
child: Container(
height: 43,
width: 162,
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.35),
borderRadius: const BorderRadius.only(bottomLeft: Radius.circular(15),bottomRight: Radius.circular(15)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(widget.info,style: RecentChats.likedetails,),
Padding(
padding: const EdgeInsets.only(left: 3),
child: Container(
height: 4,
width: 4,
decoration: const BoxDecoration(
color: DatingColoCodes.blue,
shape: BoxShape.circle,
),
),
),
],
),
Text(widget.view,style: RecentChats.viewprofile,),
],
)),
)
],
);

Answer 1

Can't reproduce with the given snippet, it works just fine on me when I run it, maybe try to put the complete snippet?
But anyways, you can achieve the same behavior without the Stack widget, just put the Texts as a child of the Container whose hold the image.
Here is the working example, you can copy paste and run in DartPad
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(30),
child: GridView.count(
crossAxisCount: 2,
crossAxisSpacing: 20,
mainAxisSpacing: 8,
childAspectRatio: 0.8,
children: [
for (int i=0; i<20; i++)
Container(
clipBehavior: Clip.hardEdge,
decoration: BoxDecoration(
color: Colors.green,
borderRadius: BorderRadius.circular(20),
image: DecorationImage(
image: NetworkImage('https://source.unsplash.com/random'),
fit: BoxFit.cover,
),
),
/// For some reason, GridView / Container are stretching
/// the height, forcing it to be in full height so we gotta
/// do some hack, we put a Column, and then put the Container
/// with the texts inside the Column as well and make the height
/// as height as the item height by using `MainAxisSize.min`.
///
/// The first Column is to position the Container inside it to
/// the bottom of the item (see: `MainAxisAlignment.end`) and force
/// the width to be full width by using `CrossAxisAlignment.stretch`
///
/// Lastly, we do a `Clip.hardEdge` to prevent the text container
/// to apear sharp-squared and follow the roundness of the parent
/// container instead.
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: Colors.red.withOpacity(0.70),
padding: const EdgeInsets.symmetric(vertical: 8),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Hello item $i'),
Text('Washington DC'),
],
),
),
],
),
),
],
),
),
);
}
}
Sidenote: when I say "forcing it to be full height", it means adding height property will simply just not work, that is why I put a column instead.