Layout: Text overflowing in Flutter

Question

I have an issue where my text overflows the card on the right, but I tried applying Expanded \ Flexible, I tried using FittedBox with the fit: BoxFit.scaleDown but no use, so either I'm putting them in the wrong ancestry order or something else is the issue. Initially, the height of the Container was supposed to be 98 but due to the text being long as it is, I would like to keep the design but the height can change to be dynamically and not fixed since I want to fit the text inside the Card widget.

Here is the code:

Card(
                                          color: Color(0xFF29ABE2),
                                          elevation: 4,
                                          shape: RoundedRectangleBorder(
                                            borderRadius:
                                                BorderRadius.circular(4),
                                          ),
                                          child: Wrap(
                                            children: [
                                              Container(
                                                height: 98, // height can changed in order to fit the text, but I would like to make it more dynamically then instead of giving it a fixed height
                                                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: [
                                                    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'),
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ],
                                          ),
                                        ),

I have removed the style properties from the widget so the code can be seen easier. Thanks in advance for the help!

Try this: Text('New York, NY, USA - 1 World Way, Los Angeles, CA 90045, USA', overflow: TextOverflow.ellipsis) — Filipe Piletti Plucenio, Jul 19 '21 at 16:38

score 2 · Accepted Answer · answered Jul 19 '21 at 17:41

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:

Thanks, your solution was the easiest it seems, I have no idea how I didn't that, like I said I tried those options... — GrandMagus, Jul 19 '21 at 21:33

Lucas Josino · Answer 2 · 2021-07-19T16:51:25.183

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'),
            ),
          ),
        ),
      ],
    );

...

Thanks Lucas! It seems a simple `Flexible` did the trick! – GrandMagus Jul 19 '21 at 21:36 — GrandMagus, Jul 19 '21 at 21:36

score 1 · Answer 3 · answered Jul 19 '21 at 17:32

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'),
                ),
              ],
            ),
          ),

...

Your solution was great also but I think @Ravindra S. Patil 's answer is the easiest, although your explanation of your work is precise and I thank you for that! — GrandMagus, Jul 19 '21 at 21:35

Layout: Text overflowing in Flutter

3 Answers3

Linked