CODEWITHSUNDEEP
flutterdartflutter-layout
Rajdeep
Rajdeep

Reputation: 2462

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

Upvotes: 11

Views: 17586

Answers (6)

Dinith
Dinith

Reputation: 1

in your DropdownButtonFormField or DropdownButton add

isExpanded: true

thing like this

DropdownButtonFormField<String>(isExpanded: true)

Upvotes: 0

Rahul Biswas
Rahul Biswas

Reputation: 79

There is a alignment property in DropdownMenuItem class.

DropdownButton(
  //...
  isExpanded: true, // this will take all width available
)

If you want to change it's width wrap DropdownButton with SizedBox or Padding.

item: [
  DropdownMenuItem(
    //...
    alignment: AlignmentDirectional.center,
  ),
]

Upvotes: 1

Feshibaba
Feshibaba

Reputation: 101

You can use the code below to perfectly position the text in the dropdown at the center and still have the dropdown icon positioned at the right end of your container.

DropdownButtonHideUnderline(
  child: DropdownButton(
    value: dropdownvalue,
    items: items.map((String items) {
      return DropdownMenuItem(
          value: items,
          child: Center(
            child: Text(items),
          ),
      );
    }).toList(),
    onChanged: (String? newValue) {
      setState(() {
          dropdownvalue = newValue!;
      });
    },
    isExpanded: true,
  ),
),

So we simply add isExpanded: true, and add a Center() widget to the Text(items) in the DropdownMenuItem().

Upvotes: 0

Junaid Lodhi
Junaid Lodhi

Reputation: 361

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

Upvotes: 30

Tejas Shukla
Tejas Shukla

Reputation: 144

Yes you can do it like the following code sample.

Container(
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5))),
              margin: EdgeInsets.only(top: 5, bottom: 5),
              padding: EdgeInsets.only(right: 5, left: 5),
              child: ConstrainedBox(
                constraints: const BoxConstraints(
                  minWidth: double.infinity,
                ),
                child: Container(
                  child: Center(
                    child: DropdownButtonHideUnderline(
                      child: DropdownButton(
                        iconSize: 0.0,
                        items: <DropdownMenuItem<int>>[
                          new DropdownMenuItem(
                            child: new Text(
                              'Optional Information',
                              style: TextStyle(color: Colors.black54),
                            ),
                          ),
                          new DropdownMenuItem(
                            child: new Text(
                              'Male',
                              style: TextStyle(color: Colors.black54),
                            ),
                          ),
                          new DropdownMenuItem(
                              child: new Text(
                            'Female',
                            style: TextStyle(color: Colors.black54),
                          )),
                        ],
                        onChanged: (V) {},
                      ),
                    ),
                  ),
                ),
              ),
            ),

Here i have used my color and decoration view for my porpose you can change it as per you requirement.

Upvotes: 2

Rahul Tumpala
Rahul Tumpala

Reputation: 63

A simple and straight answer is Not Possible. But there's always a way.

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.

@override
  Widget build(BuildContext context) {
    return Container(
      height: _kMenuItemHeight,
      alignment: AlignmentDirectional.centerStart,
      child: child,
    );
  }

Change the alignment: AlignmentDirectional.centerStart to alignment: AlignmentDirectional.center and it should work :)

Upvotes: 3

Related Questions