Text Overflowing in a Row, Flutter

Question

I'm having issues with the layout because of the long text, I've tried using Expanded / Flexible with the text that is causing the issue to fill the space it needs but it's overflowing. I know the question is asked hundred times, but I don't understand where is the mistake. I tried applying to both Expanded / Flexible to all of the Row/Columns individually and too all at the same time (mostly I was trying out layouts to try to fix it), and I still have the issue... I even tried to use the FittedBox with fit: BoxFit.(all of them).

Container(
          alignment: Alignment.centerLeft,
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: const EdgeInsets.only(right: 8.0),
                    child: Icon(Icons.directions_car),
                  ),
                  Row(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text("Text 1"),
                          SizedBox(
                            height: 4,
                          ),
                          Text('TEXT 2'),
                        ],
                      ),
                      SizedBox(
                        width: 27,
                      ),
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text('1 World Way, Los Angeles, CA 90045, USA',
                            textAlign: TextAlign.left,
                            ),
                          SizedBox(
                            height: 4,
                          ),
                          Text('FLIGHT 3231'),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        );

By my understanding, and do correct me if I'm wrong, applying Expanded / Flexible, Flexible takes only the needed space, and Expanded takes all available space, respecting the flex factor. So most of the time I use the Flexible widget, but this time it is not working.

Thanks in advance for the help!

score 12 · Answer 1 · answered Jul 20 '21 at 19:25

Try using Expanded widget with flex value set as per the expectation of UI filling.

Sample Code:

Center(
        child: Container(
      height: 80,
      color: Colors.yellow,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Icon(Icons.bus_alert),
          ),
          Expanded(
              flex: 1,
              child: Container(
                width: 1,
                color: Colors.green,
                child: Column(
                  children: [Text("Text 1"), Text("Text 1")],
                ),
              )),
          Expanded(
              flex: 3,
              child: Container(
                color: Colors.blue,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Text("1 World Way, Los Angeles, CA 90045, USA"),
                    Text("FLIGHT 3231"),
                  ],
                ),
              ))
        ],
      ),
    ))

Note: There is a limitation for the text content using. We need to make sure to set the height according to the expected text length.

Ravindra S. Patil · Accepted Answer · 2023-02-21T07:18:00.100

You can use Flexible or Expanded Widget You should try to below code :

Card(
        shape: RoundedRectangleBorder(
          side: BorderSide(
            color: Colors.blue,
          ),
          borderRadius: BorderRadius.circular(15.0),
        ),
        margin: EdgeInsets.all(16.0),
        child: Container(
          padding: EdgeInsets.all(8.0),
          alignment: Alignment.centerLeft,
          child: Column(
            children: [
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Icon(Icons.directions_car),
                  SizedBox(
                    width: 10,
                  ),
                  Flexible(
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text("Text 1"),
                        SizedBox(
                          height: 4,
                        ),
                        Text('TEXT 2'),
                      ],
                    ),
                  ),
                  SizedBox(
                    width: 27,
                  ),
                  Flexible(
                    child: Container(
                      child: Column(
                        children: [
                          Text(
                            '1 World Way, Los Angeles, CA 90045, USA',
                            textAlign: TextAlign.left,
                          ),
                          SizedBox(
                            height: 4,
                          ),
                          Text(
                            'FLIGHT 3231',
                            textAlign: TextAlign.left,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),

Your screen like this :

score 4 · Answer 3 · answered Jul 22 '21 at 08:00

If the text is really long, then using Expanded will wrap the text according to the parent widget, thus leading to change in the font size. You might consider using ellipsis.

return Container(
  width:300  //give a width of your choice
  child: Text('Any long text',
        overflow:TextOverflow.ellipsis,
         ),
     );

score 3 · Answer 4 · answered Jul 20 '21 at 19:08

wrap it by a container with fixed width and then use auto_sized_text. Or you can wrap your Text widget by FittedBox by fixed width. it would do the same approach. Feel free to add maxLine, minFontSize and maxFontSize' in auto_sized_text. Using ExpandedorFlexible` only affects the size of the container when your text length is lower than the given width, and It does not help you in this situation.

Text Overflowing in a Row, Flutter

4 Answers4

Linked

Related