DEV Community

Pallavii Sharrma
Pallavii Sharrma

Posted on

Introducing multi_select_flutter_custom: A Customizable Multi-Select Widget for Flutter Apps

⚫ Introduction
While working on complex Flutter UI forms, I often found limitations in existing multi-select widgets — especially when it came to customization and styling. That's what inspired me to build multi_select_flutter_custom — a lightweight, fully customizable multi-select widget for Flutter.

This plugin allows developers to easily integrate a beautiful and flexible multi-select dropdown or dialog in their Flutter apps with minimal configuration.

⚫ Features
✅ Fully customizable UI
✅ Works with any data type using generics
✅ Supports chips, dropdowns, and dialogs
✅ Easy-to-use API similar to multi_select_flutter, but with better customization
✅ Null safety support

`⚫ Installation
Add this to your pubspec.yaml:

dependencies:
multi_select_flutter_custom: ^
Then run:

flutter pub get`

How to Use
Here's a quick example of how to use it:

`


MultiSelectCustomBottomSheetField<String>(
items: ['Apple', 'Banana', 'Mango']
.map((e) => MultiSelectCustomItem<String>(value: e, label: e))
.toList(),
onConfirm: (values) {
print("Selected values: $values");
},
title: const Text("Select Fruits"),
)
🔧 You can also create your own custom itemBuilder or use chip display widgets.

`

Customization
You can customize the:

  1. Dialog style
  2. Title widget
  3. Item builder
  4. Confirmation buttons
  5. Chip display
  6. Selected item styling

Example with chips:

MultiSelectCustomChipDisplay<String>(
items: selectedItems.map((e) => MultiSelectCustomItem(value: e, label: e)).toList(),
)

Use Cases

Tag selection
Filter dropdowns
User roles or categories
Multi-select search input

Why I Built This
Most of the popular packages like multi_select_flutter are great, but they often fall short when full visual customization is needed. I wanted something reusable and developer-friendly — so I built this with flexibility and simplicity in mind.

Top comments (0)