Multiple Search Selection In Flutter

On this weblog, we’ll discover the right way to Implement A number of Search Choice In Flutter.

Flutter is a versatile and highly effective framework for constructing cross-platform cellular purposes.

customers to seek for objects and choose a number of choices, making it helpful for varied eventualities like choosing tags, classes, or filtering information.

You may additionally verify our flutter app growth firm web page.

Implementation:-

First we have to create a brand new flutter undertaking and add the next dependencies within the pubspec.yaml file.

dependencies:
flutter:
sdk: flutter
multiple_search_selection: ^2.5.3

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

Add the next package deal to your class.

import ‘package deal:multiple_search_selection/multiple_search_selection.dart’;

We are going to first create MultipleSearchSelection:

We create a Stateful Widget A number of Search Choice that holds the state of our widget.

MultipleSearchSelection<T>.creatable(
            title: title;
            createOptions: CreateOptions(
              createItem: (textual content) {
                return Metropolis(title: textual content,);
              },
              createItemBuilder: (textual content) => Align(
                alignment: Alignment.centerLeft,
                little one: Padding(
                  padding: const EdgeInsets.all(8.0),
                  little one: Textual content('Create "$textual content"'),
                ),
              ),
            ),
            objects: objects,
            fieldToCheck: (c) {
              return c.title;
            },
            itemBuilder: (nation, index) {
              return merchandise listing view;
            },
            pickedItemBuilder: (nation) {
              return chosen merchandise view;
            },        
          ),

Let’s essential elements of this code:

MultipleSearchSelection<T>:
This the customized widget’s title, and it takes a sort parameter T to specify the kind of objects it really works with.
title:
It seems to be a title for the search and choice part.
createOptions:
It is a configuration for creating new objects inside the search choice part. It consists of:
- createItem:
  A operate that takes textual content as enter and seems to create a brand new merchandise (e.g., a Metropolis with the given title).
- createItemBuilder:
  A operate that returns a widget for displaying the newly created merchandise.
objects:
It appears to be the listing of things that the consumer can search by and choose from.
fieldToCheck:
It is a operate that checks a property of every merchandise to match towards the search enter.
itemBuilder:
A operate that takes an merchandise and an index and may return a widget to show every merchandise within the listing.
pickedItemBuilder:
A operate that takes a picked merchandise and may return a widget to show the chosen merchandise.

full code:-

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

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

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

class _SearchScreenState extends State<SearchScreen> {
  Listing<Metropolis> 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'),
    ];
    tremendous.initState();
  }

  @override
  Widget construct(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      dwelling: Scaffold(
        appBar: AppBar(
          title: const Textual content("A number of Search Choice"),
        ),
        physique: SingleChildScrollView(
          little one: MultipleSearchSelection<Metropolis>.creatable(
            title: Padding(
              padding: const EdgeInsets.all(12.0),
              little one: Textual content(
                'Metropolis',
                type: Theme.of(context).textTheme.bodyMedium?.copyWith(
                      fontSize: 22,
                      fontWeight: FontWeight.daring,
                    ),
              ),
            ),
            showClearSearchFieldButton: true,
            createOptions: CreateOptions(
              createItem: (textual content) {
                return Metropolis(
                  title: textual content,
                );
              },
              createItemBuilder: (textual content) => Align(
                alignment: Alignment.centerLeft,
                little one: Padding(
                  padding: const EdgeInsets.all(8.0),
                  little one: Textual content('Create "$textual content"'),
                ),
              ),
              pickCreatedItem: true,
            ),
            objects: cities,
            fieldToCheck: (c) {
              return c.title;
            },
            itemBuilder: (nation, index) {
              return Padding(
                padding: const EdgeInsets.all(6.0),
                little one: Container(
                  ornament: BoxDecoration(
                    borderRadius: BorderRadius.round(6),
                    coloration: Colours.white,
                  ),
                  little one: Padding(
                    padding: const EdgeInsets.symmetric(
                      vertical: 20.0,
                      horizontal: 12,
                    ),
                    little one: Textual content(nation.title),
                  ),
                ),
              );
            },
            pickedItemBuilder: (nation) {
              return Container(
                ornament: BoxDecoration(
                    coloration: Colours.white,
                    border: Border.all(coloration: Colours.gray[400]!),
                    borderRadius: BorderRadius.round(4)),
                little one: Padding(
                  padding: const EdgeInsets.all(8),
                  little one: Textual content(nation.title),
                ),
              );
            },
            selectAllButton: Padding(
              padding: const EdgeInsets.all(12.0),
              little one: DecoratedBox(
                ornament: BoxDecoration(
                    border: Border.all(coloration: Colours.gray),
                    borderRadius: BorderRadius.round(4)),
                little one: Padding(
                  padding: const EdgeInsets.all(8.0),
                  little one: Textual content(
                    'Choose All',
                    type: Theme.of(context).textTheme.bodyMedium,
                  ),
                ),
              ),
            ),
            clearAllButton: Padding(
              padding: const EdgeInsets.all(12.0),
              little one: DecoratedBox(
                ornament: BoxDecoration(
                    border: Border.all(coloration: Colours.gray),
                    borderRadius: BorderRadius.round(4)),
                little one: Padding(
                  padding: const EdgeInsets.all(8.0),
                  little one: Textual content(
                    'Clear All',
                    type: Theme.of(context).textTheme.bodyMedium,
                  ),
                ),
              ),
            ),
            caseSensitiveSearch: false,
            fuzzySearch: FuzzySearch.none,
            itemsVisibility: ShowedItemsVisibility.alwaysOn,
            showSelectAllButton: true,
            maximumShowItemsHeight: 525,
          ),
        ),
      ),
    );
  }
}

class Metropolis {
  remaining String title;

  Metropolis({required this.title});
}