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!

Answer 1

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.

Answer 2

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(
      height: 90,
      // padding: EdgeInsets.all(8.0),
      alignment: Alignment.centerLeft,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                  width: 80,
                  alignment: Alignment.center,
                  child: Icon(Icons.directions_car)),
              SizedBox(
                width: 10,
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("Text 1"),
                  SizedBox(
                    height: 4,
                  ),
                  Text('TEXT 2'),
                ],
              ),
              SizedBox(
                width: 27,
              ),
              Expanded(
                child: Container(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '1 World Way, Los Angeles',
                        textAlign: TextAlign.left,
                        style: TextStyle(height: 1),
                      ),
                      SizedBox(
                        height: 4,
                      ),
                      Text(
                        'FLIGHT 3231',
                        textAlign: TextAlign.left,
                        style: TextStyle(height: 1),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    ),
  ),

Your screen like this :