Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Long String in Flutter DropdownMenuItem causing overlapping

I've got a DropdownButton in my Flutter app that contains some fairly long strings and i'm having an issue with some text overlapping in the DropdownMenuItems. There is a link to the image and in there you can see the text from one option is overlapping with the next option. I tried to wrap the text in an expanded but that isn't doing the trick.

Is there a way to create some equal separation between the DropdownMenuItems? I've tried to play around with softwrap and overflow but these are simply cutting the Strings short which is not ideal as the user needs to be able to fully read each item from the DropDown.

Ideally an equal gap between each item and no overlap is the outcome i'm looking for. Surely there is a solution to having long strings in a dropdown

enter image description here

DropdownMenuItem(
    value: value,
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[Expanded(child: Text(value))],
    ))
like image 291
Callum Clift Avatar asked Jul 25 '26 13:07

Callum Clift


2 Answers

DropdownButton(
isExpanded: true, //just add this property as true
like image 153
Joel jones Avatar answered Jul 27 '26 05:07

Joel jones


Expanded( // wrap the DropdownButton with Expanded widget
  child: DropdownButton(
    isExpanded: true, // also set the isExpanded property to true
like image 31
Muhammad Adam Avatar answered Jul 27 '26 04:07

Muhammad Adam