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: