Layout: Text overflowing in Flutter

Solution 1:

You should use Flexible or Expanded Widget like as below code :

            Card(
              color: Color(0xFF29ABE2),
              elevation: 4,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(4),
              ),
              child: Wrap(
                children: [
                  Container(
                    height: 98,
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                        bottomRight: Radius.circular(4),
                        topRight: Radius.circular(4),
                      ),
                    ),
                    margin: EdgeInsets.only(left: 3),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Flexible(
                          child: Padding(
                            padding: const EdgeInsets.only(left: 16.0),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              mainAxisAlignment:
                                  MainAxisAlignment.spaceEvenly,
                              children: [
                                Text('7/22/2021 14:59'),
                                Text(
                                    'New York, NY, USA - 1 World Way, Los Angeles, CA 90045, USA'),
                                Text('7/22/2021 14:59'),
                              ],
                            ),
                          ),
                        ),
                        Padding(
                          padding: const EdgeInsets.only(right: 22.0),
                          child: TextButton(
                            onPressed: () {
                              //some logic
                            },
                            child: Text('VIEW'),
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),

your output screen look like this:

Solution 2:

Add a Flexible to all your widgets inside the Row

Change the flex value to ajust the size of every item.

...

Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Flexible(
          flex: 3,
          child: Padding(
            padding: const EdgeInsets.only(left: 16.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Text('7/22/2021 14:59'),
                Text(
                    'New York, NY, USA - 1 World Way, Los Angeles, CA 90045, USA',
                    overflow: TextOverflow.clip),
                Text('7/22/2021 14:59'),
              ],
            ),
          ),
        ),
        Flexible(
          flex: 1,
          child: Padding(
            padding: const EdgeInsets.only(right: 22.0),
            child: TextButton(
              onPressed: () {
                //some logic
              },
              child: Text('VIEW'),
            ),
          ),
        ),
      ],
    );

...

Solution 3:

I added an Expanded to Column to make it fill as much space as possible.

To make the height dynamic depending on the text, I removed the fixed height of the Container and added the property "mainAxisSize: MainAxisSize.min" in the Column to fill as little space as possible.

Finally, I adjusted the padding and, to have spacing between the texts, I used Sizedbox between them.

...

Container(
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.only(
                    bottomRight: Radius.circular(4),
                    topRight: Radius.circular(4))),
            margin: EdgeInsets.only(left: 3),
            padding: EdgeInsets.symmetric(vertical: 16.0, horizontal: 16.0),
            child: Row(
              children: [
                Expanded(
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text('7/22/2021 14:59'),
                      SizedBox(height: 8.0),
                      Text(
                        'New York, NY, USA - 1 World Way, Los Angeles, CA 90045, USA',
                      ),
                      SizedBox(height: 8.0),
                      Text('7/22/2021 14:59'),
                    ],
                  ),
                ),
                TextButton(
                  onPressed: () {
                    //some logic
                  },
                  child: Text('VIEW'),
                ),
              ],
            ),
          ),

...