Image widget: the height does not match the parent

Question

I am an Android developer and I am trying to develop a very simple application in order to discover Flutter.

I would like to create a list with very simple cells. A card with:

on the left an image with a fixed width. The height should match the parent container ;
on the right some text fields that are stacked vertically.

I can align the widgets correctly but impossible for the image to set the height property as "match parent".

Here my current tree:

Widget _buildTabBarView({@required List<AttractionCategory> categories})
  {
    return TabBarView(
      children: <Widget>[
        for(var category in categories)
          Container(
            child: ListView.builder(
              padding: EdgeInsets.all(8),
              itemCount: category.attractions.length,
              itemBuilder: (context, index)
              {
                return Card(
                  clipBehavior: Clip.antiAliasWithSaveLayer,
                  child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: <Widget>[
                      Padding(
                        padding: EdgeInsets.only(right: 8),
                        child: Image(
                          fit: BoxFit.fill,
                          width: 125,
                          image: AssetImage(category.attractions[index].photo),
                        ),
                      ),
                      Expanded(
                        child: Column(
                          children: <Widget>[
                            Padding(
                              padding: EdgeInsets.only(bottom: 8, top: 8, right: 8),
                              child: Align(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  category.attractions[index].name,
                                  style: Theme.of(context).textTheme.title,
                                ),
                              ),
                            ),
                            Padding(
                              padding: EdgeInsets.only(right: 8, bottom: 8),
                              child: Align(
                                alignment: Alignment.topLeft,
                                child: Text(
                                  category.attractions[index].description,
                                  style: Theme.of(context).textTheme.body1,
                                ),
                              ),
                            ),
                            (category.attractions[index].size != null) ? Padding(
                              padding: EdgeInsets.only(right: 8, bottom: 8),
                              child: Align(
                                alignment: Alignment.topLeft,
                                child: Row(
                                  children: <Widget>[
                                    Padding(
                                      padding: EdgeInsets.only(right: 8),
                                      child: Icon(
                                        Icons.accessibility_new,
                                        size: 16,
                                      ),
                                    ),
                                    Text(
                                      category.attractions[index].size,
                                      style: Theme.of(context).textTheme.body1.copyWith(color: Color.fromARGB(255, 57, 180, 54)),
                                    ),
                                  ],
                                ),
                              ),
                            ) : Container(),
                          ],
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
      ],
    );
  }

And here the output:

As you can see, the Image's height does not match parent.

How can I achieve that ?

Do not hesitate to suggest me a whole new tree if mine is awful!

Thank you for your help!

score 1 · Answer 1 · answered Aug 21 '19 at 22:26

1

Replace your Image including the surrounding padding with the following:

                Container(
              width: 125.0,
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: AssetImage("myphoto"),
                fit: BoxFit.fill),
              ),
            ),

Please refer here, just the first result on google:

How do I stretch an image to fit the whole background (100% height x 100% width) in Flutter?

answered Aug 21 '19 at 22:26

Daniel Eberl

1,268
1
10
22

Thank you for you help but it does not work. If I do not use the `height` attribute on the container the image is not displayed. – rolandl Aug 22 '19 at 09:04
Are you using this in a ListView()? Can you post some more code of the context in which it is used? – Daniel Eberl Aug 22 '19 at 09:20
Yes, I am using it in a `ListView`. I have updated my post with the whole function that builds the widgets tree. – rolandl Aug 22 '19 at 09:32
The problem is, when the Aspect Ratio of you image can not cover the height with the given width. In your example, if your image is lets say 3:1 (w,h) , if your card height exceeds 41,66 (125/3), the image cant cover the height with the given width. It would then have to be stretched on the y-axis which is not what you want, right? Give it a width of lets say 160, and it should work as you expect it. – Daniel Eberl Aug 22 '19 at 09:55
Does it mean that we cannot apply the same behavior as the scale type "center crop" on Android ? :( – rolandl Aug 22 '19 at 10:04
My bad, I am having a faulty thought. Let me check again, sorry :D – Daniel Eberl Aug 22 '19 at 10:12
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/198298/discussion-between-daniel-szy-and-rolandl). – Daniel Eberl Aug 22 '19 at 10:55

Image widget: the height does not match the parent

1 Answers1