title: Flutter: How to fix overflow in row?
body: <p>I have a <code>Row</code> inside a <code>DropdownMenuItem</code>, but when one part inside of it gets to long I get an overflow.</p>
  <p>Here is a screenshot: <a href="https://i.stack.imgur.com/aDO48.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aDO48.png" alt="Here is a screenshot" /></a></p>
  <p>And this is the code:</p>
  <pre><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: &quot;https://[...].vercel.app/static/boatClasses/&quot; + boat.boatClass + &quot;.png&quot;,
                                progressIndicatorBuilder: (context, url, downloadProgress) =&gt; CircularProgressIndicator(value: downloadProgress.progress),
                                errorWidget: (context, url, error) =&gt; Icon(Icons.error),
                              ),
                            ),
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Text(
                                boat.name,
                                style: Theme.of(context).textTheme.bodyText1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              Text(
                                (boat.country == &quot;&quot; ? &quot;&quot; : boat.country + &quot; &quot;) + 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(&quot;configs&quot;).get(&quot;colors&quot;)[&quot;applegreen&quot;]),
                                        ),
                                      )
                                    : Container(),
                                GestureDetector(
                                  onTap: () =&gt; Navigator.push(context, MaterialPageRoute(builder: (context) =&gt; BoatForm(CreationState.edit, true, boat))),
                                  child: Padding(
                                    padding: const EdgeInsets.symmetric(horizontal: 10.0),
                                    child: Icon(
                                      Icons.edit,
                                      color: Color(Hive.box(&quot;configs&quot;).get(&quot;colors&quot;)[&quot;primary&quot;]),
                                    ),
                                  ),
                                ),
                                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(&quot;configs&quot;).get(&quot;colors&quot;)[&quot;secondary&quot;]),
                                    ),
                                  ),
                                ),
                              ],
                            ),
  </code></pre>
  <p>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?</p>