I'm trying to replicate a feature I like in twitter.
As you can see from the images above Twitter images are always the exact same width but the height are in respect to the image. I have been able to semi replicate this idea using BoxFit.contain but the Container doesn't fit the image.
What I have implemented]
Container(
width: 290.0,
// height: 400,
constraints: const BoxConstraints(
maxHeight: 350,
minHeight: 150,
),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(27.5),
image: DecorationImage(
image: AssetImage(image[itemIndex]),
fit: BoxFit.fitWidth,
),
boxShadow: const [
BoxShadow(
color: Color(0x80000000),
offset: Offset(0, 2.5),
blurRadius: 5,
),
],
),
),
I tried a FittedBox with no luck. I attempted a FractionallySizedBox but kept on getting an error! If anybody could lead me in the right direction I would appreciate it!
This is the config that worked for me. It's a combo of the 2.
ClipRRect(
borderRadius:
BorderRadius.circular(27.5),
child: Container(
//width: 290.0,
constraints: const BoxConstraints(
maxHeight: 350,
minHeight: 150,
),
decoration: const BoxDecoration(
color: Colors.red,
/*image: DecorationImage(
image: AssetImage(image[itemIndex]),
fit: BoxFit.cover,
),*/
boxShadow: [
BoxShadow(
color: Color(0x80000000),
offset: Offset(0, 2.5),
blurRadius: 5,
),
],
),
child: Image.asset(
image[itemIndex],
width: 290,
fit: BoxFit.cover,
),
),
),