I'm trying to make the DropdownButton
hint, text and menu items appear in the center instead of left but TextAlign.center
does not seem to be doing anything.
Image of Dropdown with the hint:
Image of Dropdown with the selected item as text:
Image of the Menu items when arrow is pressed:
My code:
return Theme(
data: ThemeData(canvasColor: blackTrans2, brightness: Brightness.dark),
child:Container(
width: MediaQuery.of(context).size.width/1.2,
decoration: BoxDecoration(
color: blackTrans,
borderRadius: BorderRadius.all(Radius.circular(5.0)),
),
child:DropdownButtonHideUnderline(
child: ButtonTheme(
alignedDropdown: true,
child: DropdownButton(
value: _dateSelected,
hint: AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,),
isDense: false,
onChanged: (String newValue){
setState(() {
_dateSelected = newValue;
});
},
items: snapshot.data.documents.map((DocumentSnapshot document){
return DropdownMenuItem<String>(
value: document.documentID,
child: AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,),
);
}).toList(),
),
),
)
)
);
Not sure if this affects anything but I'm using AutoSizeText in order to resize my text dynamically.
Update: I managed to make the Menu items appear in the center by using Center
, but the text and hint is still remains to the left tho even with Center
... :
// Does not seem to change the hint or text position (when menu item selected)
hint: Center(child:AutoSizeText(NA_FLIGHT_PAGE_DROPDOWN, style: TextStyle(color: white,),textAlign: TextAlign.center,)),
// Changes the menu item to the center instead of left
child: Center(child:AutoSizeText(document.documentID, style: TextStyle(color: white,),textAlign: TextAlign.center,)),
You have to go to the dropdown. dart provided with the flutter package. If you're using VSCode Ctrl+Click on the DrpoDownMenuItem class and change the following code. Change the alignment: AlignmentDirectional.
The shortcut key to centre align the selected text is Ctrl + E. Q.
Using Align widget to Center a Text The Align widget aligns its child within itself. Get the Text widget inside the Align widget and then set the alignment property to Alignment. center to bring Text in the center.
For those who are seeing option to change flutter class dropdown.dart. You don't need to do that. Do this:
IsExpanded will also take care of overflow.
DropdownButton(
isExpanded: true,
value: category_selected,
items: categories.map<DropdownMenuItem<String>>((var value) {
return DropdownMenuItem<String>(
value: value["name"],
child: Center(
child: Text(
value["name"],
textAlign: TextAlign.center,
),
),
);
}).toList(),
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With