Flutter: How to fix overflow in row?

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?

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

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

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

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