Drop down menu in flutter

drop_down_menu_demo.md

Dropdown in flutter

224478949-d76fa2f9-7a99-4eae-b186-17895accd5cb.mov

what is a drop-down menu?

• It is a list. A graphical control element that lets a user pick one value from a list.
• It has two states, active and inactive.
• When a drop-down is inactive, it displays a single value.
• When it is activated, it displays a list of values, from which a single value can be selected.
• They are generally used to save space.
• Offering drop-down menus can help users avoid scrolling and can quickly get them to access the correct option.
• Since they look very much like text fields and it is a way to make the form look more cohesive when there is a need in the form to have a question that needs specific input.
• It can be tricky to decide when to use a drop-down instead of another interface type, such as a radio button or open text field for specific input. The general idea is we use it when there are more than five input options.

Drop-down in flutter

• Drop-down comes out of the box in Flutter.
• It is called the DropdownButton widget.
• DropdownButton accepts two required parameters, items and onChanged.
• The items are the list of objects of type DropdownMenuItem that the user sees in the drop-down menu. Ï
• The onChanged is the function that is called to update the state of the variable that holds onto the value of this DropdownButton.
• DropdownButton also accepts many other optional parameters that help in changing up the User Interface of the drop-down menu.

DropdownButton<T>(
  items: list.map((value) {
    return DropdownMenuItem<T>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (_) {},
)

How to implement drop-down list in flutter?

1. Create a list that has to be shown in the form of a menu.
2. Create a variable that can hold onto the selected value.
3. Set the variable with an initial value. This must belong to the above list.

class _MyHomePageState extends State<MyHomePage> {
  final list = ['','A', 'B', 'C', 'D'];
  String item = '';
  
  .....
}

4. In the build method create a new list variable called the itemList.
5. Create DropdownMenuItem type objects using the list and add them to the new itemList.
6. Add DropdownButton widget to the desired place.
7. Give its items parameter the itemList value.

class _MyHomePageState extends State<MyHomePage> {
  .....
  
  @override
  Widget build(BuildContext context) {
   final itemList = list.map((String value) {
          return DropdownMenuItem<String>(
            value: value,
            child: Text(value),
          );
        }).toList();
        
    return Scaffold(
     appBar: AppBar(title: const Text("Dropdown demo")),
     body: DropdownButton<String>(
       value: item,
       items: itemList,
       onChanged: (_){},
     ),
    );
    
  .....
  }
}

8. Fix the onChanged function to update the item variable.

class _MyHomePageState extends State<MyHomePage> {

  .....
  
        onChanged: (value) => setState(() {
            item = value ?? '';
          }),
      ),
    );
  }
}

and Thats it.

Takeaways

• Flutter uses a widget called DropdownButton to create a drop-down menu.
• Create a variable that can hold onto the selected value.
• Create a list of DropdownMenuItem type objects.
• Add the drop-down button widget to the desired place.
• Give its items parameter the itemList value.
• Fix the onChanged function to update the selected value variable.
• To add a custom user-interface you can always add values to the various DropdownButton parameters and make it your own.

Thanks for reading.

main.dart

import 'package:flutter/material.dart';

import 'my_home_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Dropdown demo",
      theme: ThemeData(
        brightness: Brightness.dark,
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final list = ['', 'A', 'B', 'C', 'D'];
  String item = '';

  @override
  Widget build(BuildContext context) {
    final itemList = list.map((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList();

    return Scaffold(
      appBar: AppBar(
        title: const Text("Dropdown demo"),
      ),
      body: DropdownButton<String>(
        value: item,
        items: itemList,
        onChanged: (value) => setState(() {
          item = value ?? '';
        }),
      ),
    );
  }
}