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 takestextual content
as enter and seems to create a brand new merchandise (e.g., aMetropolis
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}); }
Output:-
Conclusion:-
We’ve accomplished with implementation of A number of Search Choice In Flutter.
Test right here for extra fascinating blogs – https://mobikul.com/weblog/
Hope this weblog helped you to raised perceive the implementation of A number of Search Choice In Flutter.
Thanks for studying this weblog ❤️
References:-
https://pub.dev/packages/multiple_search_selection