How to prevent Overflow Horizontally?

Question

I am struggling to make this work but I tried everything and still, I can't make this work. So, I have the structure below:

Row(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      CircleAvatar(
        radius: 40.0,
        backgroundImage: Image
            .network(
          '$thumbnail',
          fit: BoxFit.cover,
        )
            .image,
      ),
      SizedBox(
        width: 20,
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Really biiiig drink name here',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28
            ),
          ),
          Text(
            'Category goes here',
            style: TextStyle(
              color: Colors.white.withOpacity(.8)
            ),
          ),
        ],
      ),
    ],
  ),

And it renders like this:

overflow

How can I clip, or wrap that title text without defining a fixed width to a parent widget?

Check this answer https://stackoverflow.com/a/54222581/5882307 — OMi Shah, Nov 21 '19 at 04:35
Combining @OMiShah answer with ChyperX, I achieved what I wanted. Thank you guys. — Thiago Hencke, Nov 21 '19 at 14:03

score 2 · Accepted Answer · answered Nov 21 '19 at 05:03

Use Expanded widgets to resist overflow of view

Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  CircleAvatar(
                    radius: 40.0,
                    backgroundImage: Image.network('https://i.stack.imgur.com/LJ30b.png', fit: BoxFit.cover,).image,
                  ),
                  SizedBox(
                    width: 20,
                  ),
                  Expanded(child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Text(
                        'Really biiiig drink name here',
                        style: TextStyle(
                            color: Colors.yellow,
                            fontSize: 28
                        ),
                      ),
                      Text(
                        'Category goes here',
                        style: TextStyle(
                            color: Colors.red.withOpacity(.8)
                        ),
                      ),
                    ],
                  ), ),

                ],
              ),

Accepting this one, every answer says the same thing. Thank You. — Thiago Hencke, Nov 21 '19 at 14:04

score 0 · Answer 2 · answered Nov 21 '19 at 04:40

Add Expanded to your inner Column to give it a defined width.

Row(
  crossAxisAlignment: CrossAxisAlignment.start,
  children: <Widget>[
    CircleAvatar(
      radius: 40.0,
      backgroundImage: Image.network(
        '$thumbnail',
        fit: BoxFit.cover,
      ).image,
    ),
    SizedBox(
      width: 20,
    ),
    Expanded(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Really biiiig drink name here',
            style: TextStyle(
              color: Colors.white,
              fontSize: 28
            ),
          ),
          Text(
            'Category goes here',
            style: TextStyle(
              color: Colors.white.withOpacity(.8)
            ),
          ),
        ],
      ),
    ),
  ],
);

score 0 · Answer 3 · answered Nov 21 '19 at 04:44

0

If you add an Expand to where the overflow is taking place it should solve the problem.

answered Nov 21 '19 at 04:44

Bnd10706

1,933
5
24
39

How to prevent Overflow Horizontally?

3 Answers3