skip to Main Content

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


  1. In your image.asset give his property

    fit: BoxFit.cover
    
    Login or Signup to reply.
  2. I don’t think the problem is the code, but the image

    1

    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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search