flutter - How to use DropdownButton

Flutter DropdownButton

The DropdownButton class represents a material design button for selecting from a list of items. The dropdown button allows the user to select from a number of items. The DropdownButton shows the currently selected item as well as an arrow that opens a menu for selecting another item.

The DropdownButton’s all entries in a menu must represent values with consistent types. Commonly, the flutter developers use an enum. Each DropdownMenuItem in items must be specialized with that same type of argument.

The DropdownButton class’s onChanged callback should update a state variable that defines the dropdown's value. This callback should also call State.setState to rebuild the dropdown menu with the new value.

When the flutter developers set the onChanged callback to null or the list of items to null then the dropdown button will be disabled. In a disabled DropdownButton its arrow will be displayed in grey and it will not respond to input.

The DropdownButton class has many properties to customize its look and behaviors such as alignment, autofocus, borderRadius, disabledHint, dropdownColor, elevation, focusColor, hint, icon, items, onChanged, onTap, style, and isExpanded.

The DropdownButton class also has several methods to enhance its usability for example createElement(), createState(), toString(), toStringDeep(), toStringShort(), and toStringShallow() methods.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.red),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample>{
  String dropdownValue = "Red";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFFEFEFA),
      appBar: AppBar(
          title: const Text("Flutter - DropdownButton Example")
      ),
      body: bodyContent(),
    );
  }


  bodyContent() {
    return Center(
        child: DropdownButton<String>(
          value: dropdownValue,
          items: <String>['Red','Green','Yellow','Black','Pink']
              .map<DropdownMenuItem<String>>((String value){
            return DropdownMenuItem<String>(
                value: value,
                child:Text(value)
            );
          }).toList(),
          onChanged: (String? newValue){
            setState(() {
              dropdownValue = newValue??dropdownValue;
            });
            SnackBar snackBar = SnackBar(
                content: Text("$newValue selected")
            );
            ScaffoldMessenger.of(context).showSnackBar(snackBar);
          },
        )
    );
  }
}