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.

You may also check our flutter app development company page.

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