CODEWITHSUNDEEP
dartflutterflutter-layout
Callum Clift
Callum Clift

Reputation: 335

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))],
    ))

Upvotes: 3

Views: 3025

Answers (2)

Mohammed Adam
Mohammed Adam

Reputation: 409

Expanded( // wrap the DropdownButton with Expanded widget
  child: DropdownButton(
    isExpanded: true, // also set the isExpanded property to true

Upvotes: 1

Joel jones
Joel jones

Reputation: 729

DropdownButton(
isExpanded: true, //just add this property as true

Upvotes: 6

Related Questions