Flutter dropdown text field

Question

I am still new to Flutter. Is there an example of a material dropdown list text field? I saw the example on Material Text Field but I didn't find anywhere in the documentation on how to implement this. Thanks for your help on this.

Answer 1

UPDATED :

Text form field with a dropdown

var _currencies = [
    "Food",
    "Transport",
    "Personal",
    "Shopping",
    "Medical",
    "Rent",
    "Movie",
    "Salary"
  ];

 FormField<String>(
          builder: (FormFieldState<String> state) {
            return InputDecorator(
              decoration: InputDecoration(
                  labelStyle: textStyle,
                  errorStyle: TextStyle(color: Colors.redAccent, fontSize: 16.0),
                  hintText: 'Please select expense',
                  border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0))),
              isEmpty: _currentSelectedValue == '',
              child: DropdownButtonHideUnderline(
                child: DropdownButton<String>(
                  value: _currentSelectedValue,
                  isDense: true,
                  onChanged: (String newValue) {
                    setState(() {
                      _currentSelectedValue = newValue;
                      state.didChange(newValue);
                    });
                  },
                  items: _currencies.map((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                    );
                  }).toList(),
                ),
              ),
            );
          },
        )

Hope this helps!

Answer 2

You want the DropdownButton or DropdownButtonFormField https://api.flutter.dev/flutter/material/DropdownButton-class.html

and the DropdownMenuItem https://api.flutter.dev/flutter/material/DropdownMenuItem-class.html

return DropdownButtonFormField(
  items: categories.map((String category) {
    return new DropdownMenuItem(
      value: category,
      child: Row(
        children: <Widget>[
          Icon(Icons.star),
          Text(category),
        ],
       )
      );
     }).toList(),
     onChanged: (newValue) {
       // do other stuff with _category
       setState(() => _category = newValue);
     },
     value: _category,
     decoration: InputDecoration(
       contentPadding: EdgeInsets.fromLTRB(10, 20, 10, 20),
         filled: true,
         fillColor: Colors.grey[200],
         hintText: Localization.of(context).category, 
         errorText: errorSnapshot.data == 0 ? Localization.of(context).categoryEmpty : null),
       );

Answer 3

Other answers have fully described what you need, but here is an example that puts it all together, this is a reusable dropdown textfield widget that allows you to specify a list of options of any type (without losing dart's beautiful type system).

class AppDropdownInput<T> extends StatelessWidget {
  final String hintText;
  final List<T> options;
  final T value;
  final String Function(T) getLabel;
  final void Function(T) onChanged;

  AppDropdownInput({
    this.hintText = 'Please select an Option',
    this.options = const [],
    this.getLabel,
    this.value,
    this.onChanged,
  });

  @override
  Widget build(BuildContext context) {
    return FormField<T>(
      builder: (FormFieldState<T> state) {
        return InputDecorator(
          decoration: InputDecoration(
            contentPadding: EdgeInsets.symmetric(
                horizontal: 20.0, vertical: 15.0),
            labelText: hintText,
            border:
                OutlineInputBorder(borderRadius: BorderRadius.circular(5.0)),
          ),
          isEmpty: value == null || value == '',
          child: DropdownButtonHideUnderline(
            child: DropdownButton<T>(
              value: value,
              isDense: true,
              onChanged: onChanged,
              items: options.map((T value) {
                return DropdownMenuItem<T>(
                  value: value,
                  child: Text(getLabel(value)),
                );
              }).toList(),
            ),
          ),
        );
      },
    );
  }
}

And you may use it like this:

AppDropdownInput(
            hintText: "Gender",
            options: ["Male", "Female"],
            value: gender,
            onChanged: (String value) {
              setState(() {
                gender = value;
                // state.didChange(newValue);
              });
            },
            getLabel: (String value) => value,
          )