Flutter: Drop down and Chip widget

 dropdown lists in Flutter

To use dropdown lists we can use the DropdownButton class in Flutter. DropdownButton requires a type for the items on the list. For instance, if we would have a list of Strings then we have to define that when setting up the list.

The reason that the widget is called a DropdownButton and not DropdownList, is because it actually is a clickable widget that shows the currently chose item as a text. Also, it can be pretty much styled like a button.

To create a dropdown list in Flutter we can use the following code:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Dropdown list demo'),
      ),
      body: Container(
        child: Center(
          child: DropdownButton<String>(
            value: _chosenValue,
            items: <String>['Google', 'Apple', 'Amazon', 'Tesla']
                .map<DropdownMenuItem<String>>((String value) {
              return DropdownMenuItem<String>(
                value: value,
                child: Text(value),
              );
            }).toList(),
            onChanged: (String value) {
              setState(() {
                _chosenValue = value;
              });
            },
          ),
        ),
      ),
    );
  }

  

 

 

Flutter – Chip Widget

Chip is a material design widget which comes built-in with flutter. It can simply be described as a compact element holding an icon and text, usually a rounded rectangle in the background. It can serve many purposes, like it can be simply used as a button, representing a user with a CircleAvatar and text, or topic tags in the blog articles, etc.