Flutter: How to fix overflow in row?

Question

I have a Row inside a DropdownMenuItem, but when one part inside of it gets to long I get an overflow.

Here is a screenshot:

And this is the code:

Row(
                      children: [
                        Padding(
                          padding: const EdgeInsets.fromLTRB(5.0, 0.0, 30.0, 0.0),
                          child: Center(
                            widthFactor: 1,
                            child: CachedNetworkImage(
                              width: 40,
                              height: 40,
                              imageUrl: "https://[...].vercel.app/static/boatClasses/" + boat.boatClass + ".png",
                              progressIndicatorBuilder: (context, url, downloadProgress) => CircularProgressIndicator(value: downloadProgress.progress),
                              errorWidget: (context, url, error) => Icon(Icons.error),
                            ),
                          ),
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              boat.name,
                              style: Theme.of(context).textTheme.bodyText1,
                              overflow: TextOverflow.ellipsis,
                            ),
                            Text(
                              (boat.country == "" ? "" : boat.country + " ") + boat.sailNumber.toString(),
                              style: Theme.of(context).textTheme.bodyText2,
                            ),
                          ],
                        ),
                        Expanded(
                          child: Row(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.end,
                            children: [
                              boat == selectedBoat
                                  ? Padding(
                                      padding: const EdgeInsets.only(right: 16.0),
                                      child: Icon(
                                        Icons.check_box,
                                        size: 35.0,
                                        color: Color(Hive.box("configs").get("colors")["applegreen"]),
                                      ),
                                    )
                                  : Container(),
                              GestureDetector(
                                onTap: () => Navigator.push(context, MaterialPageRoute(builder: (context) => BoatForm(CreationState.edit, true, boat))),
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
                                  child: Icon(
                                    Icons.edit,
                                    color: Color(Hive.box("configs").get("colors")["primary"]),
                                  ),
                                ),
                              ),
                              GestureDetector(
                                onTap: () {
                                  DatabaseInstance.boat.deleteBoat(boat.documentid);
                                  setState(() {});
                                },
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 10.0),
                                  child: Icon(
                                    Icons.delete,
                                    color: Color(Hive.box("configs").get("colors")["secondary"]),
                                  ),
                                ),
                              ),
                            ],
                          ),

What I want it to look like is that the image on the left is always shown as well as the icons on the right. The texts in the middle should then be shortened to a length which doesn't result in an overflow. How can I achive that?

Solution 1

You can use Wrap widget. It will move the widgets to a new line if they can't fit.

Wrap( children: [ ... ], );

Solution 2

You can wrap your text with a FittedBox() widget. This makes your text scale with it's parent widget always fitting to it.

I guess it's the boat name overflowing, so you should wrap it around your Text with boat.name.

Here is the documentation: https://api.flutter.dev/flutter/widgets/FittedBox-class.html

Solution 3

Add a Container to the widget which is overflowing, and change the width (Container ) to double.infinity

Comments

[PlutoHDDev]

Thanks for your answer, but it unfortunately doesn't work: pastebin.com/9WDKPcxJ

[PlutoHDDev]

Thanks for your answer. I put a FittedBox around the Text, but I get this error: pastebin.com/sv7W5cTF Here is my code: pastebin.com/WABjdKkT

[PlutoHDDev]

If I understand the Wrap widget correctly, then it only works with multiple childrens. I just have one: the Text. I think this is why it doesn't work.

[YoBo]

Did you try to wrap the text or parent column in flexible?

[PlutoHDDev]

Even with the text(s) or the column wrapped in a flexible it does not work.

[YoBo]

Ok, but what is the expected behavior? Do you want the text that does not fit to wrap to a new line or do you want it to overflow with ellipsis(...)?

[PlutoHDDev]

I think the best would be if it overflows with ellipsis.

[YoBo]

Add the following to the Text: Text( ..., overflow: TextOverflow.ellipsis, ... ) P.S. Give a points if that tip helped you solve the problem.

[PlutoHDDev]

I already have that in there, but it doesn't work. Here is the extract from the code from the question: Text( boat.name, style: Theme.of(context).textTheme.bodyText1, overflow: TextOverflow.ellipsis, ),

[YoBo]

Please use Flexible! On the Column with 2 Texts or only on the first Text(the one that is overflowing). One of both should work. If not, I will create a project with DropdownItem and simulate the problem until I solve it :)

[PlutoHDDev]

It partly works. Now the icons (in Expanded) are not aligned to the right anymore. Do you have a solution for that?

[PlutoHDDev]

I somehow managed to fix the problem. Here is my final code: pastebin.com/fUpyiM99 Thank you very much.