The search bar is a basic UI element provided by each and every application or website we use to search for the content we need. The basic search bar can be created easily but the one we are going to make will search for elements based on an entered substring in real-time. Let’s see how to create the search bar.
Step by Step Implementation
Step 1: Creating a Flutter project.
- Open VS code, and by using “Ctrl+Shift+P” select “Flutter: New Project”.
- Select the folder in which you want to create your application.
- Then give a name to your application.
- After pressing “Enter” Flutter SDK will create a new project for you.
Step 2: After creating the project, open the main.dart file.
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp( const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GFG(),
);
}
}
|
Step 3: Below the MyApp widget creates a stateful widget and name it as you wish. In VS Code you can try typing stf and the autocomplete will give you a stateful widget as the suggestion select it and name it just like shown in the code below.
Dart
import 'package:flutter/material.dart' ;
void main() {
runApp( const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo' ,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GFG(),
);
}
}
class GFG extends StatefulWidget {
const GFG({Key? key}) : super(key: key);
@override
State<GFG> createState() => _GFGState();
}
class _GFGState extends State<GFG> {
@override
Widget build(BuildContext context) {
return Scaffold();
}
}
|
Step 4: Now in Scaffold use the parameter appBar and use appBar’s actions parameter to create an IconButton inside it.
Dart
class GFG extends StatefulWidget {
const GFG({Key? key}) : super(key: key);
@override
State<GFG> createState() => _GFGState();
}
class _GFGState extends State<GFG> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(
"GeeksForGeeks" ,
),
actions: [
IconButton(
onPressed: () {
showSearch(
context: context,
delegate: CustomSearchDelegate()
);
},
icon: const Icon(Icons.search),
)
],
),
);
}
}
|
Step 5: Creating the CustomSearchDelegate class which extends SearchDelegate. The SearchDelegate has 4 necessary overrides which need to be implemented.
Dart
class CustomSearchDelegate extends SearchDelegate {
List<String> searchTerms = [
"Apple" ,
"Banana" ,
"Mango" ,
"Pear" ,
"Watermelons" ,
"Blueberries" ,
"Pineapples" ,
"Strawberries"
];
@override
List<Widget>? buildActions(BuildContext context) {
return [
IconButton(
onPressed: () {
query = '' ;
},
icon: Icon(Icons.clear),
),
];
}
@override
Widget? buildLeading(BuildContext context) {
return IconButton(
onPressed: () {
close(context, null);
},
icon: Icon(Icons.arrow_back),
);
}
@override
Widget buildResults(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
@override
Widget buildSuggestions(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
}
|
With this, we have created our search bar.
Complete Dart code:
Dart
class CustomSearchDelegate extends SearchDelegate {
List<String> searchTerms = [
"Apple" ,
"Banana" ,
"Mango" ,
"Pear" ,
"Watermelons" ,
"Blueberries" ,
"Pineapples" ,
"Strawberries"
];
@override
List<Widget>? buildActions(BuildContext context) {
return [
IconButton(
onPressed: () {
query = '' ;
},
icon: Icon(Icons.clear),
),
];
}
@override
Widget? buildLeading(BuildContext context) {
return IconButton(
onPressed: () {
close(context, null);
},
icon: Icon(Icons.arrow_back),
);
}
@override
Widget buildResults(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
@override
Widget buildSuggestions(BuildContext context) {
List<String> matchQuery = [];
for (var fruit in searchTerms) {
if (fruit.toLowerCase().contains(query.toLowerCase())) {
matchQuery.add(fruit);
}
}
return ListView.builder(
itemCount: matchQuery.length,
itemBuilder: (context, index) {
var result = matchQuery[index];
return ListTile(
title: Text(result),
);
},
);
}
}
|
Output:
Last Updated :
09 May, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...