MultiSelect CheckBox Inside DropDown In Flutter

Suraj Chauhan

8 May 2024

In this blog we are going to discuss the Implementation of MultiSelect Checkbox Inside DropDown in flutter.

Introduction

MultiSelect checkbox inside dropdown is helpful to show the list data in side the dropdown with the help of this with it’s help you can give a pretty look to flutter UI.

With the help of MultiSelect Checkbox we can show the list inside the dropdown and according to our need we can select items into dropdown list and this items is visible into dropdown.

You may also check our Flutter App Development services.

Implementation

We are going to use DropDownMultiSelect Widget for Implement MultiSelect Checkbox in DropDown.

For Implementation please follow below steps:

First of all we need to create a new flutter project and add the following dependency in pubspec.yaml file.

1	multiselect: ^0.1.0

multiselect:->It’s dependency to add MultiSelecting functionality in flutter.

Add latest version of these dependency in your flutter project.

After that we need to create a StatefulWidget(MultiSelectCheckBox) and call from main.dart and import below package on this Widget class.

1	import 'package:multiselect/multiselect.dart';

After importing library and package we need to add following code inside MultiSelectCheckBox class.

class MultiSelectCheckBox extends StatefulWidget {
  const MultiSelectCheckBox({super.key, required this.title});
  final String title;
  @override
  State<MultiSelectCheckBox> createState() => _MultiSelectCheckBoxState();
}

class _MultiSelectCheckBoxState extends State<MultiSelectCheckBox> {

List<String> variantsList = ['Noida',"Delhi","Goa","Mumbai","Bihar","Bangalore","UP","Pune","Surat","Nashik"];
  List<String> selectedCheckBoxValue = [];

@override
  Widget build(BuildContext context) {

return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'Multiselect Checkbox in Dropdown',
            ),
        Container(
          width: MediaQuery.of(context).size.width/1,
          height: 100,
          padding:const EdgeInsets.all(20),
          child: DropDownMultiSelect(
            decoration: InputDecoration(
              fillColor: Theme.of(context).colorScheme.onPrimary,
              focusColor: Theme.of(context).colorScheme.onPrimary,
              enabledBorder:  const OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                      color: Colors.grey,
                      width: 1.5
                  )),
              focusedBorder: const OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(4)),
                  borderSide: BorderSide(
                    color:Colors.blue,
                    width: 1.5,
                  )),
            ),
            options: variantsList,
            selectedValues: selectedCheckBoxValue,
            onChanged: (List<String> value) {
           //   value = selectedCheckBoxValue;
              print("${selectedCheckBoxValue}");

},
            whenEmpty: 'Select Location',
          ),
        )
          ],
        ),
      ),
    );
  }
}

class MultiSelectCheckBox extends StatefulWidget {

const MultiSelectCheckBox({super.key, required this.title});

final String title;

@override

State<MultiSelectCheckBox> createState() => _MultiSelectCheckBoxState();

}

class _MultiSelectCheckBoxState extends State<MultiSelectCheckBox> {

List<String> variantsList = ['Noida',"Delhi","Goa","Mumbai","Bihar","Bangalore","UP","Pune","Surat","Nashik"];

List<String> selectedCheckBoxValue = [];

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(

title: Text(widget.title),

body: Center(

child: Column(

mainAxisAlignment: MainAxisAlignment.center,

children: <Widget>[

const Text(

'Multiselect Checkbox in Dropdown',

Container(

width: MediaQuery.of(context).size.width/1,

height: 100,

padding:const EdgeInsets.all(20),

child: DropDownMultiSelect(

decoration: InputDecoration(

fillColor: Theme.of(context).colorScheme.onPrimary,

focusColor: Theme.of(context).colorScheme.onPrimary,

enabledBorder: const OutlineInputBorder(

borderRadius: BorderRadius.all(Radius.circular(4)),

borderSide: BorderSide(

color: Colors.grey,

width: 1.5

)),

focusedBorder: const OutlineInputBorder(

borderRadius: BorderRadius.all(Radius.circular(4)),

borderSide: BorderSide(

color:Colors.blue,

width: 1.5,

)),

options: variantsList,

selectedValues: selectedCheckBoxValue,

onChanged: (List<String> value) {

// value = selectedCheckBoxValue;

print("${selectedCheckBoxValue}");

whenEmpty: 'Select Location',

)

);

}

variantsList:->It’s list in which you have string type of data.

selectedCheckBoxValue:->It’s list in which the DropDownMultiSelect return selected data into dropdown list.

Conclusion:->

For more knowledge related to this topic you can check here.

In this blog we have discussed about MultiSelect Checkbox Inside Dropdown In Flutter and for more deep knowledge about MultiSelect Checkbox Inside Dropdown you can go there.

You can check here for more about MultiSelectItem of List.

You can also check other blogs from here for more knowledge.