{"id":404793,"date":"2023-10-10T12:20:17","date_gmt":"2023-10-10T12:20:17","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=404793"},"modified":"2026-03-06T12:25:28","modified_gmt":"2026-03-06T12:25:28","slug":"multiple-search-selection-in-flutter","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/multiple-search-selection-in-flutter\/","title":{"rendered":"Multiple Search Selection In Flutter"},"content":{"rendered":"\n

In this blog, we’ll explore how to Implement Multiple Search Selection In Flutter.<\/p>\n\n\n\n

Flutter is a flexible and powerful framework for building cross-platform mobile applications<\/a>.<\/p>\n\n\n\n

users to search for items and select multiple options, making it useful for various scenarios like selecting tags, categories, or filtering data.<\/p>\n\n\n\n

You may also check our flutter app <\/a>development<\/a> company page.<\/p>\n\n\n\n

Implementation:-<\/h2>\n\n\n\n

First we need to create a new flutter project and add the following dependencies in the pubspec.yaml file.<\/p>\n\n\n\n

dependencies:\nflutter:\nsdk: flutter\nmultiple_search_selection: ^2.5.3<\/pre>\n\n\n\n
Now, run the command \u201cflutter pub get\u201d to add the dependencies.<\/p>\n\n\n\n
Add the following package to your class.<\/p>\n\n\n\n
import ‘package:multiple_search_selection\/multiple_search_selection.dart’;<\/p>\n\n\n\n
We will first create MultipleSearchSelection:<\/h2>\n\n\n\n
We create a Stateful Widget Multiple Search Selection that holds the state of our widget.<\/p>\n\n\n\n
MultipleSearchSelection<T>.creatable(\n            title: title;\n            createOptions: CreateOptions(\n              createItem: (text) {\n                return City(name: text,);\n              },\n              createItemBuilder: (text) => Align(\n                alignment: Alignment.centerLeft,\n                child: Padding(\n                  padding: const EdgeInsets.all(8.0),\n                  child: Text('Create "$text"'),\n                ),\n              ),\n            ),\n            items: items,\n            fieldToCheck: (c) {\n              return c.name;\n            },\n            itemBuilder: (country, index) {\n              return item list view;\n            },\n            pickedItemBuilder: (country) {\n              return selected item view;\n            },        \n          ),<\/pre>\n\n\n\n
Let’s important parts of this code:<\/strong><\/p>\n\n\n\n
    \n
  1. MultipleSearchSelection<T>: <\/code><\/strong>
    This the custom widget’s name, and it takes a type parameter T to specify the type of items it works with.
    <\/li>\n\n\n\n
  2. title<\/strong><\/code>:
     It appears to be a title for the search and selection component.
    <\/li>\n\n\n\n
  3. createOptions<\/strong><\/code>: 
    This is a configuration for creating new items within the search selection component. It includes:\n