CODEWITHSUNDEEP
drop-down-menuflutteralignment
speedlight
speedlight

Reputation: 343

Flutter - How to align selected item from DropdownButton?

I am unable to align the selected item from DropdownButton to the center.

I have tried child: Center() under the DropdownMenuItem, it is able to align those items however after I have selected one of the items, the selected item was aligned to the Left immediately. I would also like to align the selected item to the Center.

Anyone knows how to achieve it?

Thanks in advance.

Unable to align selected item to Center

_dropdownValues:

final List<String> _dropdownValues = [
  "One",
  "Two12345",
  "Three123456789",
  "Four",
  ];

  String _selectedValue;

Under Widget Build:

body: Center(

        child: Row(

          mainAxisAlignment: MainAxisAlignment.center,

          children: <Widget>[
            Container( 
              child: Text('Name:',),
            ),

            Container(

              child: Center(
                child: DropdownButton(
                  hint: Text('Select ...'),
                  items: _dropdownValues.map((value) => DropdownMenuItem(
                    child: Center( child: Text(value), ),
                    value: value,
                  )).toList(),

                  onChanged: (String value) {
                    setState(() {
                      this._selectedValue = value;
                    });
                  },
                  isExpanded: false,
                  value: _selectedValue,
                ),
              ),
            ),
          ],
        ),
      ),

Upvotes: 20

Views: 33719

Answers (7)

Ajith
Ajith

Reputation: 393

My solution is to add alignment to dropdownMenuItem

DropdownButton<String>(
                              isExpanded: true,
                              elevation: 0,
                              underline: const SizedBox(),
                              value: controller.selectedItem.value.itemCode,
                              // Placeholder text
                              items: controller.testItems.map((var item) {
                                return DropdownMenuItem<String>(
                                  alignment: Alignment.centerRight,
                                  value: item.itemCode,
                                  child: Text("${item.itemCode}"),
                                );
                              }).toList(),
                              onChanged: (String? val) {
                                var selected = controller.testItems
                                    .firstWhere((w) => w.itemCode == val);
                                controller.onSlnoItemSelected(selected);
                              }
                              //controller.onGsmCntryChanged(val!),
                              ))
                    ],

Upvotes: 0

Nguyễn Quốc Việt
Nguyễn Quốc Việt

Reputation: 11

DropdownButton(

alignment: Alignment.centerRight,

)

Upvotes: 0

Mahmoud Abu Alheja
Mahmoud Abu Alheja

Reputation: 3658

just add Center as parent to child of DropdownMenuItem

   DropdownButton(
      items: genderList
          .map((string) => DropdownMenuItem(
                child: Center(
                  child: Text(
                    string,
                    style: Theme.of(context).textTheme.bodyText2,
                  ),
                ),
              ))
          .toList(), 
      
      onChanged: (value) {  },
    )

Upvotes: 10

WatsMyName
WatsMyName

Reputation: 4478

Incase someone stumble upon this issue. You need to specify width and this can be achieved by using selectedItemBuilder property of DropdownButton.

final List<String> items = <String>['1','2','3'];
String selectedItem = '1';

@override
Widget build(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.symmetric(horizontal: 12.0),
    child: DropdownButton<String>(
      value: selectedItem,
      hint: Container(
        alignment: Alignment.centerRight,
        width: 180,
        child: Text("Hint text", textAlign: TextAlign.end)
      ),
      onChanged: (String string) => setState(() => selectedItem = string),
      selectedItemBuilder: (BuildContext context) {
        return items.map<Widget>((String item) {
          return Container(
            alignment: Alignment.centerRight,
            width: 180,
            child: Text(item, textAlign: TextAlign.end)
          );
        }).toList();
      },
      items: items.map((String item) {
        return DropdownMenuItem<String>(
          child: Text('Log $item'),
          value: item,
        );
      }).toList(),
    ),
  );
}

code from here

Upvotes: 21

Ouardia
Ouardia

Reputation: 359

You probably won't need this now but if anyone is wondering how I found the following solution.

DropdownButton(
   hint: Align(alignment: Alignment.centerRight, child: Text('any text')), 
   ...
   items: _dropdownValues.map((item) {
   return DropdownMenuItem(
            child: new Align(alignment: Alignment.centerRight, child: Text(item)),
            value: item,);
   }).toList(),
)

Upvotes: 4

Sven
Sven

Reputation: 3414

If you don't mind setting a fixed width you can wrap your DropdownMenuItem Text child in a SizedBox. Then you set the textAlign property to TextAlign.center, like so:

DropdownButton(
  // ...
  items: _dropdownValues.map((value) => DropdownMenuItem(
    child: SizedBox(
      width: 100.0, // for example
      child: Text(value, textAlign: TextAlign.center),
    ),
    value: value,
  )).toList(),
  // ...
),

Upvotes: 20

miteshpithadiya
miteshpithadiya

Reputation: 214

This is the expected behavior, default alignment of the menu item is centerLeft as per this link: https://github.com/flutter/flutter/issues/3759

You can raise a new issue for this functionality on the flutter Github page.

Upvotes: 0

Related Questions