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?

Answer 1

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

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