CODEWITHSUNDEEP
flutter
Alex
Alex

Reputation: 29

How can I center the hint text in a DropdownButtonFormField?

I'd like to center the hint text in my form field. How can I achieve this?

I've tried using an Align widget, but that's not working.

Here's my current code:

List<String> options = [
  'Main room',
  'Side Room',
  'Bathroom(lol)',
  'Back Room',
];

DropdownButtonFormField<String>(
  decoration: InputDecoration(enabledBorder: InputBorder.none),
  items: options.map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Align(
          alignment: Alignment.center,
          child: Text(value, style: TextStyle(fontSize: 20))),
    );
  }).toList(),
  isDense: true,
  isExpanded: false,
  hint: Align(
      alignment: Alignment.center,
      child: Text(options[0], style: TextStyle(fontSize: 20))),
  onChanged: (_) {},
)

From this, I'd expect the text to be centered, but it comes out like this:

Current dropdown

Upvotes: 0

Views: 2839

Answers (1)

Maz341
Maz341

Reputation: 2439

You have to change the isExpanded: true

Final Code:

DropdownButtonFormField<String>(
  decoration: InputDecoration(enabledBorder: InputBorder.none),
  items: options.map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Align(
          alignment: Alignment.center,
          child: Text(value, style: TextStyle(fontSize: 20))),
    );
  }).toList(),
  isDense: true,
  isExpanded: true,
  hint: Align(
      alignment: Alignment.center,
      child: Text(options[0], style: TextStyle(fontSize: 20))),
  onChanged: (_) {},
)

Upvotes: 5

Related Questions