How to create a multi-select dropdown field in Flutter

In this post, you will learn how you can create a simple yet very useful multi-select dropdown field in your flutter app. We are not going to deep dive into much programming instead we will use a plugin named multi select.

With the help of this plugin, we can achieve our goals very easily. It’s a beginner-level tutorial anyone who knows the basics of flutter can continue. So let’s start.

Step1: Creating your flutter project and Add Dependencies

Create a project and for Adding the dependencies first goto pubs.dev and search for multi-select and then get it to your project or you can run cmd command like 

flutter pub add multiselect

or if you are using VScode then in your project’s pubspec.yaml file adds this in dependencies.

dependencies:
  multiselect: ^0.0.7

Step2: Make your home page

Create a file and name it homepage.dart makes it StatefulWidget.

Create a list of options in _HomePageState that you want in your multi-select dropdown, for example, I use some fruit names. And also create another List of String for storing values.

 List<String> fruits = ['Apple', 'Banana', 'Grapes', 'Orange', 'Mango'];
  List<String> selectedFruits = [];

Step4: Take the DropDownMultiSelect widget and fill all the required parameter

Now we will use DropDownMultiSelect() widget from the multi-select package it takes some parameters but we will only discuss the necessary parameters.

the first parameter of DropDownMultiSelect is an option it takes a list or variable that could be String, int, or anything type you want. For our example, we will pass our fruits list like this.

 DropDownMultiSelect(
              options: fruits,
            ),

The second parameter is selected values and it takes an empty list for storing the value that you will select from the dropdown.

 DropDownMultiSelect(
             options: fruits,
		  selectedValues: selectedFruits,
            ),

A third important parameter is onChange it takes a function and it passes a list of selected values and we have to assign this value to our selected fruits variable. For this use setState like in this example.

 DropDownMultiSelect(
             options: fruits,
		  selectedValues: selectedFruits,
		  onChanged: (value) {
                setState(() {
                  selectedFruits = value;
                });
                print('you have selected $selectedFruits fruits.');
              },
            ),

You can print the selected value as printed in the above example.

And the last parameter is “when empty” this is used for showing the text on the widget like what to select in our case we define  ‘Select your favorite fruits’ and once the user selects any value from drop-down that value will be displayed in place of this text like showing in the screenshot.

Step5: Your dropdown multi-select field is ready

 Once you have all the selected values in your selected fruits variable you can use this value in your app. Without this multi-select package, it would be very hard to achieve this type of result. We can achieve but for the beginners who just started flutter learning, this package is very useful.

Full Code:

import 'package:flutter/material.dart';
import 'package:multiselect/multiselect.dart';
 
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
 
  @override
  State<HomePage> createState() => _HomePageState();
}
 
class _HomePageState extends State<HomePage> {
  List<String> fruits = ['Apple', 'Banana', 'Graps', 'Orange', 'Mango'];
  List<String> selectedFruits = [];
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Multiselect Dropdown'),
      ),
      body: Center(
        child: Column(
          children: [
            DropDownMultiSelect(
              options: fruits,
              selectedValues: selectedFruits,
              onChanged: (value) {
                print('selected fruit $value');
                setState(() {
                  selectedFruits = value;
                });
                print('you have selected $selectedFruits fruits.');
              },
              whenEmpty: 'Select your favorite fruits',
            ),
          ],
        ),
      ),
    );
  }
}

Useful link to know more about the package check this URL https://pub.dev/packages/multiselect

For more Flutter tutorials, Tips, Tricks, Free code, Questions, and Error Solving.

Remember FlutterDecode.com