Simple Multi Select

Flutter package for multi-select UI widget

demo_simple_multiselect demo_simple_multiselect2

Features

  • Accepts custom input data
  • Data is updated when selected
  • BottomSheet
  • Select all
  • With or without checkbox

Getting started

  • Add the package into pubspec.yaml
dependencies:
  simple_multiselect:
  • Import in your code
import 'package:flutter_multiselect/flutter_multiselect.dart';

Usage

Create class with data and override method "toString()" If need to display only name, example:

class User {
  final String id;
  final String title;
  final String email;

  const User({required this.id, required this.title, required this.email});

  @override
  String toString() {
    return title;
  }
}

Decorate the widget as needed. Add the SimpleMultiselect widget to your build method:

Container(
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(10)),
    border: Border.all(color: Colors.black),
  ),
  padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 2),
  child: SimpleMultiselect<User>(
    labelBackgroundColor: Colors.lightGreen.shade300,
    labelStyle: const TextStyle(fontWeight: FontWeight.bold),
    dataSource: users,
    onChange: (value) => print(value),
    closeButtonText: 'Close',
    selectAllTitle: 'Select All',
    checkBox: true,
  ),
)
}

Libraries

simple_multiselect