Flutter多选搜索插件multi_select_search的使用

Multiselect Search

Easily buildable and customizable multi select widget with search field that can be used anywhere from container to dialog.

Features

• Can be used in any Flutter widget. Wrap it in Container, dialog, bottom modal sheet etc.
• User can search from your list of items.
• Selected item chips list, search field, selectable item list are all visible in one.
• List items are not hard-coded. You make your own list item widgets.
• onChanged method returns a list of selected items every time user selects/unselects an item.

Getting Started

To start using the package, add the dependencies in your pubspec.yaml and import.

dependencies:
  multi_select_search: ^1.0.0

import 'package:multi_select_search/multi_select_search.dart';

Usage

Step 1: Create a List of Items

First, you need a list of items from the same class. Your class model MUST have fromJson & toJson methods.

var list = [
  Contact(1, "Joel McHale"),
  Contact(2, "Danny Pudi"),
  Contact(3, "Donald Glover"),
  Contact(4, "Gillian Jacobs"),
  Contact(5, "Alison Brie"),
  Contact(6, "Chevy Chase"),
  Contact(7, "Jim Rush"),
  Contact(8, "Yvette Nicole Brown"),
  Contact(9, "Jeff Winger"),
  Contact(10, "Abed Nadir"),
  Contact(11, "Troy Barnes"),
  Contact(12, "Britta Perry"),
  Contact(13, "Annie Edison"),
];

class Contact {
  final int id;
  final String name;

  Contact(this.id, this.name);

  Contact.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        name = json['name'];

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
    };
  }
}

Step 2: Use the MultiSelectSearch Widget

Now you are ready to use the MultiSelectSearch widget.

Parameters

• itemBuilder: Build your own list item widgets to select from.
• chipLabelKey: A field name of your class that should be displayed in selected item chip. In this example, we’re displaying Contact’s name field value in chip when selected. So it’s 'name'.
• items: The list you created in step 1. Both items and itemBuilder must use the same list.
• initialValue: Some of your list items to be selected beforehand.
• onChanged: Returns the selected item list every time a user selects/unselects an item.
• clearAll: A widget to clear all selected items when clicked. Do not use button widgets.

MultiSelectSearch<Contact>(
  itemBuilder: (Contact item) => ListTile(
    key: ObjectKey(item),
    leading: const Icon(Icons.person),
    title: Text(item.name),
  ),
  chipLabelKey: 'name',
  items: list,
  initialValue: initial,
  onChanged: (List<Contact> items) => setState(() => selectedItems = items),
  decoration: BoxDecoration(
    color: const Color(0xFFF7A072).withOpacity(0.6),
    border: const Border(
      bottom: BorderSide(color: Colors.grey),
    ),
  ),
  clearAll: const Padding(
    padding: EdgeInsets.only(top: 10.0, right: 6.0),
    child: Icon(Icons.clear),
  ),
),

Step 3: Customize Styles

• maxHeight: Search field & selected items container’s maximum height when it’s expanded.
• decoration: Search field & selected items container decoration.
• padding: Search field & selected items container padding.
• searchFieldDecoration: InputDecoration to change search field’s style, hint text, and more.
• Selected item chip gets its style from the theme. In order to customize it, change chipThemeData in your AppTheme.

theme: ThemeData(
  primarySwatch: Colors.teal,
  chipTheme: const ChipThemeData(
    deleteIconColor: Color.fromARGB(255, 61, 61, 61),
    backgroundColor: Color(0xFFF9F7F3),
  ),
),

Additional Information

Feel free to create issues for any bugs or requests.

示例代码

import 'package:flutter/material.dart';
import 'package:multi_select_search/multi_select_search.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Multiselect Search',
      theme: ThemeData(
        primarySwatch: Colors.teal,
        chipTheme: const ChipThemeData(
          deleteIconColor: Color.fromARGB(255, 61, 61, 61),
          backgroundColor: Color(0xFFF9F7F3),
        ),
      ),
      home: const MyExampleApp(),
    );
  }
}

class MyExampleApp extends StatefulWidget {
  const MyExampleApp({Key? key}) : super(key: key);

  @override
  State<MyExampleApp> createState() => _MyExampleAppState();
}

class _MyExampleAppState extends State<MyExampleApp> {
  List<Contact> selectedItems = [];

  @override
  Widget build(BuildContext context) {
    var list = [
      Contact(1, "Joel McHale"),
      Contact(2, "Danny Pudi"),
      Contact(3, "Donald Glover"),
      Contact(4, "Gillian Jacobs"),
      Contact(5, "Alison Brie"),
      Contact(6, "Chevy Chase"),
      Contact(7, "Jim Rush"),
      Contact(8, "Yvette Nicole Brown"),
      Contact(9, "Jeff Winger"),
      Contact(10, "Abed Nadir"),
      Contact(11, "Troy Barnes"),
      Contact(12, "Britta Perry"),
      Contact(13, "Annie Edison"),
    ];

    List<Contact> initial = [
      list.first,
      list[1],
      list.last,
    ];

    return Scaffold(
      appBar: AppBar(
        title: const Text("Multi Select Search Menu"),
      ),
      body: Column(
        children: [
          Expanded(
            child: MultiSelectSearch<Contact>(
              itemBuilder: (Contact item) => ListTile(
                key: ObjectKey(item),
                leading: const Icon(Icons.person),
                title: Text(item.name),
              ),
              chipLabelKey: 'name',
              items: list,
              initialValue: initial,
              onChanged: (List<Contact> items) => setState(() => selectedItems = items),
              decoration: BoxDecoration(
                color: const Color(0xFFF7A072).withOpacity(0.6),
                border: const Border(
                  bottom: BorderSide(color: Colors.grey),
                ),
              ),
              clearAll: const Padding(
                padding: EdgeInsets.only(top: 10.0, right: 6.0),
                child: Icon(Icons.clear),
              ),
            ),
          ),
          Wrap(
            children: [
              for (var i = 0; i < selectedItems.length; i++)
                Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 8.0),
                  child: Text(selectedItems[i].name),
                )
            ],
          )
        ],
      ),
    );
  }
}

class Contact {
  final int id;
  final String name;

  Contact(this.id, this.name);

  Contact.fromJson(Map<String, dynamic> json)
      : id = json['id'],
        name = json['name'];

  Map<String, dynamic> toJson() {
    return {
      'id': id,
      'name': name,
    };
  }
}

希望这个示例能帮助你更好地理解和使用 multi_select_search 插件。如果有任何问题或需要进一步的帮助，请随时提问。