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!

Answer 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:

Answer 2

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

...

Answer 3

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

...