A package for easily creating multi-select widgets in a variety of ways

A package for easily creating multi-select widgets in a variety of ways

Multi Select Flutter Multi Select Flutter is a package for easily creating multi-select widgets in a variety of ways.

Multi Select Flutter

Multi Select Flutter is a package for easily creating multi-select widgets in a variety of ways.

drawing

drawing

Features

  • Supports FormField features like validator.
  • Neutral default design that can be altered to your heart's content.
  • Choose between a Dialog or BottomSheet style widget.
  • Easily switch the listType from LIST to CHIP.
  • Make your multi select searchable for larger lists.

Install

Add this to your pubspec.yaml file:

dependencies:
  multi_select_flutter: ^2.1.0

Usage

MultiSelectDialog

Can be used in the builder of showDialog() and triggered with your own button.

void _showMultiSelectDialog(BuildContext context) async {
  await showDialog(
    context: context,
    builder: (ctx) {
      return  MultiSelectDialog(
        items: _animals.map((e) => MultiSelectItem(e, e)).toList(),
        initialValue: _selectedAnimals,
        onConfirm: (values) {...},
      );
    },
  );
}

MultiSelectBottomSheet

Can be used in the builder of showModalBottomSheet() and triggered with your own button.

void _showMultiSelect(BuildContext context) async {
  await showModalBottomSheet(
    isScrollControlled: true, // required for min/max child size
    context: context,
    builder: (ctx) {
      return  MultiSelectBottomSheet(
        items: _animals.map((e) => MultiSelectItem(e, e)).toList(),
        initialValue: _selectedAnimals,
        onConfirm: (values) {...},
        maxChildSize: 0.8,
      );
    },
  );
}

MultiSelectChipDisplay

This widget can be used alongside your own button, or it can be specified as a chipDisplay parameter of widgets like MultiSelectDialogField.

To use this widget effectively, make sure to set the state any time the source list is changed.

You can also remove items from the source list in the onTap function.

MultiSelectChipDisplay(
  items: _selectedAnimals.map((e) => MultiSelectItem(e, e)).toList(),
  onTap: (value) {
    setState(() {
      _selectedAnimals.remove(value);
    });
  },
),

When using the chipDisplay parameter as part of a MultiSelectDialogField for example, the MultiSelectChipDisplay still renders outside the BoxDecoration of the field as seen here:

chipDisplay

If you want to encapsulate the MultiSelectChipDisplay, wrap the MultiSelectDialogField in a Container and apply the decoration to that instead:

Container(
  decoration: BoxDecoration(...),
  child: MultiSelectDialogField(
    items: _items,
    chipDisplay: MultiSelectChipDisplay(...),
  ),
),

chipDisplay

MultiSelectDialogField / MultiSelectBottomSheetField

These widgets provide an InkWell button which open the dialog or bottom sheet.

MultiSelectBottomSheetField(
  items: _animals.map((e) => MultiSelectItem(e, e.name)).toList(),
  listType: MultiSelectListType.CHIP,
  searchable: true,
  decoration: BoxDecoration(...),
  onConfirm: (values) {
    setState(() {
      _selectedAnimals = values;
    });
  },
  chipDisplay: MultiSelectChipDisplay(),
),

MultiSelectDialogFormField / MultiSelectBottomSheetFormField

These widgets are the FormField versions of MultiSelectDialogField and MultiSelectBottomSheetField. You can make use of FormField parameters such as validator and onSaved.

It comes with a default bottom-border that can be overriden with the decoration parameter.

MultiSelectDialogFormField(
    items: _animals.map((e) => MultiSelectItem(e, e.name)).toList(),
    key: _multiSelectKey,
    validator: (value) {
      if (value == null || value.isEmpty) {
        return  "Required";
      }
      return  null;
    },
    onConfirm: (values) {
      setState(() {
        _selectedAnimals = values;
      });
      _multiSelectKey.currentState.validate();
    },
),

Constructors

MultiSelectDialog

Parameter Type Default Description
confirmText Text Text("OK") Specifies the confirm button text.
cancelText Text Text("CANCEL") Specifies the cancel button text.
height double null Give the dialog a fixed height.
initialValue List null List of selected values. Required to retain values when re-opening the dialog.
items List<MultiSelectItem> null The source list of options.
listType MultiSelectListType MultiSelectListType.LIST Change the listType. Can be either  MultiSelectListType.LIST or MultiSelectListType.CHIP
onSelectionChanged Function(List) null Fires when an item is selected or unselected.
onConfirm Function(List) null Fires when the confirm button is pressed.
searchable bool false Toggle search functionality within the dialog.
title String "Select" The title that is displayed at the top of the dialog.
searchPlaceholder String "Search" Set the placeholder text of the search field.
selectedColor Color null Set the color of the checkbox or chip items that are selected.
colorator Color Function(V) null Set the selected color of individual items based on their value. Applies to both chips and checkboxes.

MultiSelectDialogField

MultiSelectDialogField has all the parameters of MultiSelectDialog plus these extra parameters:

Parameter Type Default Description
barrierColor Color null Set the color of the space outside the dialog.
buttonText Text "Select" Set text that is displayed on the button.
buttonIcon Icon Icons.arrow_downward Specify the button icon.
chipDisplay MultiSelectChipDisplay null Attach a MultiSelectChipDisplay to this field.
decoration BoxDecoration null Style the Container that makes up the field.

MultiSelectBottomSheet

Parameter Type Default Description
confirmText Text Text("OK") Specifies the confirm button text.
cancelText Text Text("CANCEL") Specifies the cancel button text.
initialChildSize double 0.3 The initial height of the BottomSheet.
initialValue List null List of selected values. Required to retain values when re-opening the dialog.
items List<MultiSelectItem> null The source list of options.
listType MultiSelectListType MultiSelectListType.LIST Change the listType. Can be either  MultiSelectListType.LIST or MultiSelectListType.CHIP
maxChildSize double 0.6 Set the maximum height threshold of the BottomSheet.
minChildSize double 0.3 Set the minimum height threshold of the BottomSheet before it closes.
onSelectionChanged Function(List) null Fires when an item is selected or unselected.
onConfirm Function(List) null Fires when the confirm button is pressed.
searchable bool false Toggle search functionality within the dialog.
title String "Select" The title that is displayed at the top of the dialog.
searchPlaceholder String "Search" Set the placeholder text of the search field.
selectedColor Color null Set the color of the checkbox or chip items that are selected.
colorator Color Function(V) null Set the selected color of individual items based on their value. Applies to both chips and checkboxes.

MultiSelectBottomSheetField

MultiSelectBottomSheetField has all the parameters of MultiSelectBottomSheet plus these extra parameters:

Parameter Type Default Usage
barrierColor Color null Set the color of the space outside the BottomSheet.
buttonIcon Icon Icons.arrow_downward Specify the button icon.
buttonText Text "Select" Set text that is displayed on the button.
chipDisplay MultiSelectChipDisplay null Attach a MultiSelectChipDisplay to this field.
decoration BoxDecoration null Style the Container that makes up the field.
shape ShapeBorder RoundedRectangleBorder(borderRadius: BorderRadius.vertical(top: Radius.circular(15.0))) Apply a ShapeBorder to alter the edges of the BottomSheet.

MultiSelectDialogFormField / MultiSelectBottomSheetFormField

These widgets have all the parameters of their non-FormField counterparts, plus these extra parameters which come from the FormField class:

Parameter Type Default Description
autovalidate List false If true, form fields will validate and update their error text immediately after every change. Default is false.
key GlobalKey null Can be used to call methods like _multiSelectKey.currentState.validate().
onSaved List null A callback that is called whenever we submit the field (usually by calling the save method on a form.
validator FormFieldValidator null Validation. See Flutter's documentation.

MultiSelectChipDisplay

Parameter Type Default Description
alignment Alignment Alignment.centerLeft Change the alignment of the chips.
chipColor Color primaryColor Set the chip color.
decoration BoxDecoration null Style the Container that makes up the chip display.
items List null The source list of selected items.
onTap Function(dynamic) null Fires when a chip is tapped.
textStyle TextStyle null Style the text on the chips.
opacity double null Set the opacity of the chips.
colorator Color Function(V) null Set the chip color of individual items based on their value.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Download Details:

Author: CHB61

Source Code: https://github.com/CHB61/multi_select_flutter

flutter dart mobile-apps

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Google's Flutter 1.20 stable announced with new features - Navoki

Google has announced new flutter 1.20 stable with many improvements, and features, enabling flutter for Desktop and Web

Top 25 Flutter Mobile App Templates in 2020

Flutter has been booming worldwide from the past few years. While there are many popular mobile app development technologies out there, Flutter has managed to leave its mark in the mobile application development world. In this article, we’ve curated the best Flutter app templates available on the market as of July 2020.

Flutter App Development Trends 2020

As the new decade dawns upon us, a slew of technologies has been making a lot of noise to grab the developers’ attention. While native app development is going strong, the trade winds are now blowing towards going cross-platform.

How To Succeed In Mobile App Wireframe Design?

This article covers everything about mobile app wireframe design: what to do and what not, tools used in designing a mobile or web app wireframe, and more.

Top 10 Mobile App Development Companies in India

The mobile application scenario has been continually changing over the years. In recent years India has become a center for mobile app development companies. The increase of smartphones has instantly increased the requirements for these apps. Every year new technological trends occur due to contin