Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center text in DropdownButton?

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:

enter image description here

Image of Dropdown with the selected item as text:

enter image description here

Image of the Menu items when arrow is pressed:

enter image description here

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,)),
like image 981
Rajdeep Avatar asked Jun 27 '19 08:06

Rajdeep


People also ask

How do I center text in DropdownButton flutter?

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.

How do you center select text?

The shortcut key to centre align the selected text is Ctrl + E. Q.

How do you center text in flutter?

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.


1 Answers

For those who are seeing option to change flutter class dropdown.dart. You don't need to do that. Do this:

  1. set property isExpanded to true
  2. use Center widget with DropdownMenuItem class children.

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(),
      ),
like image 195
Junaid Lodhi Avatar answered Oct 21 '22 13:10

Junaid Lodhi