Text inside Expanded does not wrap after flutter upgrade

Question

I am on the flutter stable channel and I have recently upgraded from v1.2.1 to v1.5.4. After that my layout stopped working the way it did before.

I have a SliverGrid with lots of Column Widgets inside of it. Inside the Column I have an Image.asset() as well as a Text Widget. I want all the images in my grid to be the same size, however the Text can be one or two lines long.

In flutter v1.2.1 this used to work like this

ConstrainedBox(
    constraints: BoxConstraints.expand(),
    child: Container(
      padding: EdgeInsets.fromLTRB(8, 0, 8, 0),
      child: Column(
        children: <Widget>[
          Image.asset('src'),
          Expanded(
              child: Text(
              widget.text,
              style: TextStyle(
                  fontWeight: FontWeight.bold, 
                  color: Colors.black),
            textAlign: TextAlign.center,
          ),
         ),
        ],
      ),
    ),
  ),

But doing the same in v1.5.4 only the first line of my text will be visible, whereas before it were two and I was able to increase the amount of visible lines by setting the mainAxisSpacing: 11.0, property to something bigger.

I can get roughly the same behaviour by wrapping the Image.asset() in an Expanded, too. But then even after fiddling with the flex values, I can not get the same layout.

This is how my minimal example looks when built with v1.2.1:

And how it looks with v1.5.4:

The code for the example I set up is on Github. You will obviously need to build it with two different flutter versions if you want to see the effect.

My question however is, how I can achieve the same behaviour I had in v1.2.1 with v1.5.4 of flutter?

score 0 · Answer 1 · answered May 22 '19 at 06:17

0

Add maxLines

Text(
  widget.text,
  style: TextStyle(
    fontWeight: FontWeight.bold, 
    color: Colors.black),
  textAlign: TextAlign.center,
  maxLines: 2,
),

answered May 22 '19 at 06:17

Michael Yuwono

2,452
1
14
32

I tried this already before and now again to make sure, but it did not have any effect. – frankenapps May 22 '19 at 06:29

score 0 · Answer 2 · answered May 22 '19 at 10:54

After trying a few different things, I came to the conclusion, that I will have to set childAspectRatio of my SliverGrid to something less than 1. And set mainAxisSpacing to 0.

Now, it looks ok. However it would be perfect, if I could change the AspectRatio according to the GridContent, because when I have only one line Text Widgets in a Row, then there is more space, than needed.

Text inside Expanded does not wrap after flutter upgrade

2 Answers2