Having a card (see image below)
Figma Info card
All I need to do is to reach this UI but look what I’ve got:
My Info card
As you can see the image is not fitted, however I created a SizedBox with needed width and heigth, child FittedBox, which has its own child Image.asset but it’s not fitted.
DevTools say that the SizedBox itself has 100×100(which is to be as expected) but the Image is not:(
So could you guys suggest me any possible solution or idea?
Appreciate any answer:))
I’ve tried to put it in Expanded but the Column with Text begins to overflow, I’ve also tried to create a Container() with ImageDecoration but this is not working as well.
This is the image I need to fit (in case someone wants to try)
Here is the code of my InfoCard() widget:
class InfoCard extends StatelessWidget {
final String heading;
final String description;
const InfoCard({super.key, required this.heading, required this.description});
@override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: 157.0,
padding: const EdgeInsets.all(20.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: ColorConstants.kBackgroundSecondary,
),
child: Row(
children: [
SizedBox(
width: 100.0,
height: 100.0,
child: FittedBox(
child: Image.asset(
'/images/info_card_icon.png',
),
),
),
const SizedBox(width: 20.0),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
heading,
style: Theme.of(context).textTheme.headlineSmall,`
),
const SizedBox(height: 10.0),
Text(
description,
style: Theme.of(context)
.textTheme
.bodySmall!
.copyWith(color: ColorConstants.kText),
),
],
),
)
],
),
);
}
}
After @CCP suggestion to remove FittedBox and set Image.asset fit = BoxFit.cover DevTools show me 100×100 image size.
WIth FittedBox()
After I removed FIttedBox()
But as you can see even it’s 100×100, the image itself is not expanded as I want
It should match the whole purple area I think
2
Answers
In your image.asset give his property
I don’t think the problem is the code, but the image
I’m not an image expert so I speak as a hypothesis: maybe even the images that contain only the object have a transparent box with a dimension behind it, and in your image that box was big and made your image small. I tried copying the image to a smaller box and using that fixed the size issue.
info_card_icon2