Multiple Search Selection In Flutter

In this blog, we’ll explore how to Implement Multiple Search Selection In Flutter.

Flutter is a flexible and powerful framework for building cross-platform mobile applications.

users to search for items and select multiple options, making it useful for various scenarios like selecting tags, categories, or filtering data.

As a leading Webkul Flutter App Development Company, we deliver advanced Flutter solutions that simplify complex UI interactions like multi-search and multi-selection.

Implementation:-

First we need to create a new flutter project and add the following dependencies in the pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
multiple_search_selection: ^2.5.3

Now, run the command “flutter pub get” to add the dependencies.

Add the following package to your class.

import ‘package:multiple_search_selection/multiple_search_selection.dart’;

We will first create MultipleSearchSelection:

We create a Stateful Widget Multiple Search Selection that holds the state of our widget.

MultipleSearchSelection<T>.creatable(
            title: title;
            createOptions: CreateOptions(
              createItem: (text) {
                return City(name: text,);
              },
              createItemBuilder: (text) => Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Create "$text"'),
                ),
              ),
            ),
            items: items,
            fieldToCheck: (c) {
              return c.name;
            },
            itemBuilder: (country, index) {
              return item list view;
            },
            pickedItemBuilder: (country) {
              return selected item view;
            },        
          ),

Let’s important parts of this code:

1. MultipleSearchSelection<T>:
   This the custom widget’s name, and it takes a type parameter T to specify the type of items it works with.
   
2. title:
   It appears to be a title for the search and selection component.
   
3. createOptions:
   This is a configuration for creating new items within the search selection component. It includes:
   • createItem:
     A function that takes text as input and appears to create a new item (e.g., a City with the given name).
   • createItemBuilder:
     A function that returns a widget for displaying the newly created item.
     
4. items:
   It seems to be the list of items that the user can search through and select from.
   
5. fieldToCheck:
   This is a function that checks a property of each item to match against the search input.
   
6. itemBuilder:
   A function that takes an item and an index and should return a widget to display each item in the list.
   
7. pickedItemBuilder:
   A function that takes a picked item and should return a widget to display the selected item.

complete code:-

import 'package:flutter/material.dart';
import 'package:multiple_search_selection/helpers/create_options.dart';
import 'package:multiple_search_selection/multiple_search_selection.dart';

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

  @override
  State<SearchScreen> createState() => _SearchScreenState();
}

class _SearchScreenState extends State<SearchScreen> {
  List<City> cities = [];

  @override
  void initState() {
    cities = [
      City(name: 'Mumbai'),
      City(name: 'Delhi'),
      City(name: 'Bangalore'),
      City(name: 'Chennai'),
      City(name: 'Kolkata'),
      City(name: 'Hyderabad'),
      City(name: 'Ahmedabad'),
      City(name: 'Jaipur'),
      City(name: 'Lucknow'),
      City(name: 'Surat'),
      City(name: 'Kanpur'),
      City(name: 'Nagpur'),
      City(name: 'Patna'),
      City(name: 'Indore'),
      City(name: 'Thane'),
      City(name: 'Bhopal'),
      City(name: 'Visakhapatnam'),
      City(name: 'Vadodara'),
      City(name: 'Miami'),
      City(name: 'New York'),
      City(name: 'Los Angeles'),
      City(name: 'Chicago'),
      City(name: 'San Francisco'),
      City(name: 'Miami'),
      City(name: 'Philadelphia'),
      City(name: 'San Antonio'),
      City(name: 'San Diego'),
      City(name: 'Dallas'),
      City(name: 'San Jose'),
      City(name: 'Austin'),
      City(name: 'Jacksonville'),
      City(name: 'Indianapolis'),
      City(name: 'Columbus'),
      City(name: 'Fort Worth'),
      City(name: 'Charlotte'),
      City(name: 'Seattle'),
      City(name: 'Denver'),
      City(name: 'Washington, D.C.'),
      City(name: 'Boston'),
      City(name: 'El Paso'),
      City(name: 'Nashville'),
      City(name: 'Oklahoma City'),
      City(name: 'Pune'),
      City(name: 'Kathmandu'),
      City(name: 'Pokhara'),
      City(name: 'Lalitpur'),
      City(name: 'Bhaktapur'),
      City(name: 'Biratnagar'),
      City(name: 'Butwal'),
      City(name: 'Nepalgunj'),
      City(name: 'Dharan'),
      City(name: 'Hetauda'),
      City(name: 'Birgunj'),
      City(name: 'Janakpur'),
      City(name: 'Dhangadhi'),
      City(name: 'Bharatpur'),
      City(name: 'Siddharthanagar'),
      City(name: 'Ghorahi'),
      City(name: 'Dhankuta'),
      City(name: 'Ilam'),
      City(name: 'Birendranagar'),
      City(name: 'Tansen'),
      City(name: 'Rajbiraj'),
    ];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Multiple Search Selection"),
        ),
        body: SingleChildScrollView(
          child: MultipleSearchSelection<City>.creatable(
            title: Padding(
              padding: const EdgeInsets.all(12.0),
              child: Text(
                'City',
                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
                      fontSize: 22,
                      fontWeight: FontWeight.bold,
                    ),
              ),
            ),
            showClearSearchFieldButton: true,
            createOptions: CreateOptions(
              createItem: (text) {
                return City(
                  name: text,
                );
              },
              createItemBuilder: (text) => Align(
                alignment: Alignment.centerLeft,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('Create "$text"'),
                ),
              ),
              pickCreatedItem: true,
            ),
            items: cities,
            fieldToCheck: (c) {
              return c.name;
            },
            itemBuilder: (country, index) {
              return Padding(
                padding: const EdgeInsets.all(6.0),
                child: Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(6),
                    color: Colors.white,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                      vertical: 20.0,
                      horizontal: 12,
                    ),
                    child: Text(country.name),
                  ),
                ),
              );
            },
            pickedItemBuilder: (country) {
              return Container(
                decoration: BoxDecoration(
                    color: Colors.white,
                    border: Border.all(color: Colors.grey[400]!),
                    borderRadius: BorderRadius.circular(4)),
                child: Padding(
                  padding: const EdgeInsets.all(8),
                  child: Text(country.name),
                ),
              );
            },
            selectAllButton: Padding(
              padding: const EdgeInsets.all(12.0),
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(4)),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Select All',
                    style: Theme.of(context).textTheme.bodyMedium,
                  ),
                ),
              ),
            ),
            clearAllButton: Padding(
              padding: const EdgeInsets.all(12.0),
              child: DecoratedBox(
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.grey),
                    borderRadius: BorderRadius.circular(4)),
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text(
                    'Clear All',
                    style: Theme.of(context).textTheme.bodyMedium,
                  ),
                ),
              ),
            ),
            caseSensitiveSearch: false,
            fuzzySearch: FuzzySearch.none,
            itemsVisibility: ShowedItemsVisibility.alwaysOn,
            showSelectAllButton: true,
            maximumShowItemsHeight: 525,
          ),
        ),
      ),
    );
  }
}

class City {
  final String name;

  City({required this.name});
}

Output:-

https://cdnblog.webkul.com/blog/wp-content/uploads/2023/10/untitled-3-1.mp4

Conclusion:-

We have done with implementation of Multiple Search Selection In Flutter.

Check here for more interesting blogs – https://mobikul.com/blog/

Hope this blog helped you to better understand the implementation of Multiple Search Selection In Flutter.

Thanks for reading this blog ❤️

References:-

https://pub.dev/packages/multiple_search_selection