Hi Guys, Welcome to Proto Coders Point. In this flutter tutorial, will learn how to create a search bar in fluttter appbar.

A search field i.e. a search bar is the must required feature to be provided to your flutter app user.

If you are android developer you might be knowing about searchview, searchbar in React Native & UISearchBar in iOS.

In flutter we have a searchDelegate class to implement searchfield in flutter.

How to add search bar in appbar flutter

In this tutorial, will add a search bar in flutter appbar, where a user can enter their search query & depending on query entered we can suggest quick search list is search bar.

Will make use of flutter showSearch + searchDelegate class

Let’s get started

Adding search bar in AppBar

After creating or opening flutter project, let’s add a search bar field in flutter appbar.

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
Scaffold(
appBar: AppBar(
title: Text("Search Bar"),
actions: [
IconButton(onPressed: (){
// class search delegate here
}, icon: const Icon(Icons.search))
],
),
);
Scaffold( appBar: AppBar( title: Text("Search Bar"), actions: [ IconButton(onPressed: (){ // class search delegate here }, icon: const Icon(Icons.search)) ], ), );
Scaffold(
      appBar: AppBar(
        title: Text("Search Bar"),
        actions: [
          IconButton(onPressed: (){
            // class search delegate here 
          }, icon: const Icon(Icons.search))
        ],
      ),
    );

Here in AppBar, I make use of actions property with has IconButton to show a search magnifying glass icon in appbar.


Flutter show search in Appbar

Now, When user click on search Icon, we must show a search TextField where user can enter his query to make a quick search.

Will use showSearch Delegate class.

showSearch is a widget that shows full screen search page and returns the search query result to the user

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
AppBar(
title: Text("Search Bar"),
actions: [
IconButton(onPressed: (){
showSearch(context: context, delegate: MySearch());
}, icon: const Icon(Icons.search))
],
),
AppBar( title: Text("Search Bar"), actions: [ IconButton(onPressed: (){ showSearch(context: context, delegate: MySearch()); }, icon: const Icon(Icons.search)) ], ),
AppBar(
        title: Text("Search Bar"),
        actions: [
          IconButton(onPressed: (){
            showSearch(context: context, delegate: MySearch());
          }, icon: const Icon(Icons.search))
        ],
      ),

Here MySearch is a class name that we will called to perform search operation in flutter.


Create class that extends SearchDelegate

Search Delegate class extends 4 override methods, create then by clicking on warning suggestion.

The override widget methods are:-

1. buildLeading:-

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
Widget? buildLeading(BuildContext context) => IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () { close(context, null) ; },
);
@override Widget? buildLeading(BuildContext context) => IconButton( icon: const Icon(Icons.arrow_back), onPressed: () { close(context, null) ; }, );
  @override
  Widget? buildLeading(BuildContext context) => IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () { close(context, null) ; },
  );
leading back button in search bar flutter

buildLeading is used to show a backbutton in search bar, so that user can click on it to close search box page, Here arrow_back icon is used as you can see in screenshot above.


2. buildAction:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
List<Widget>? buildActions(BuildContext context) => [
IconButton(
icon: const Icon(Icons.clear,color: Colors.red,),
onPressed: () {
if(query.isEmpty){
close(context, null);
}else{
query = '';
}
},
),
];
@override List<Widget>? buildActions(BuildContext context) => [ IconButton( icon: const Icon(Icons.clear,color: Colors.red,), onPressed: () { if(query.isEmpty){ close(context, null); }else{ query = ''; } }, ), ];
 @override
  List<Widget>? buildActions(BuildContext context) => [
    IconButton(
        icon: const Icon(Icons.clear,color: Colors.red,),
        onPressed: () {
          if(query.isEmpty){
            close(context, null);
          }else{
            query = '';
          }
        },
  ),
];
cancel close button in search bar flutter

buildAction is used to add some Action widgte in search bar so that use can click on it to perform some action, In out case will use cancel icon so that user can click & cancel it and close search field.


3. buildSuggestions:- flutter search bar with listview

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
Widget buildSuggestions(BuildContext context) {
List<String> suggesstions = data.where((element) {
final result = element.toLowerCase();
final input = query.toLowerCase();
return result.contains(input);
}).toList();
return ListView.builder(
itemCount: suggesstions.length,
itemBuilder: (context,index){
final suggestion = suggesstions[index];
return ListTile(
title: Text(suggestion),
onTap: (){
query = suggestion;
showResults(context);
},
);
}
);
}
@override Widget buildSuggestions(BuildContext context) { List<String> suggesstions = data.where((element) { final result = element.toLowerCase(); final input = query.toLowerCase(); return result.contains(input); }).toList(); return ListView.builder( itemCount: suggesstions.length, itemBuilder: (context,index){ final suggestion = suggesstions[index]; return ListTile( title: Text(suggestion), onTap: (){ query = suggestion; showResults(context); }, ); } ); }
 @override
  Widget buildSuggestions(BuildContext context) {

    List<String> suggesstions = data.where((element) {
      final result = element.toLowerCase();
      final input = query.toLowerCase();

      return result.contains(input);

    }).toList();

    return ListView.builder(
       itemCount: suggesstions.length,
        itemBuilder: (context,index){
          final suggestion = suggesstions[index];
          return ListTile(
            title: Text(suggestion),
            onTap: (){
              query = suggestion;

              showResults(context);
            },
          );
        }
    );
  }

buildSuggestion is used to give a quick suggestion for a search, Here as the user goes on typing user will get hints for his search query, so user can directly select from search box suggestion list as you can see in above screenshot.


buildResults:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
@override
Widget buildResults(BuildContext context) => Center(
child: Text(
query, // query will hold user selected search query
),
);
@override Widget buildResults(BuildContext context) => Center( child: Text( query, // query will hold user selected search query ), );
@override
  Widget buildResults(BuildContext context) => Center(
    child: Text(
      query,   // query will hold user selected search query
    ),
  );

The result that is finalized after the user make his search query final submission & will be shown in search page as search result.


Complete Code of Search Delegate class

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
class MySearch extends SearchDelegate{
List<String> data = [
'A','B','C','D','E','F','G','H','I','J'
];
@override
List<Widget>? buildActions(BuildContext context) => [
IconButton(
icon: const Icon(Icons.clear,color: Colors.red,),
onPressed: () {
if(query.isEmpty){
close(context, null);
}else{
query = '';
}
},
),
];
@override
Widget? buildLeading(BuildContext context) => IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () { close(context, null) ; },
);
@override
Widget buildResults(BuildContext context) => Center(
child: Text(
query,
),
);
//flutter search bar with listview
@override
Widget buildSuggestions(BuildContext context) {
List<String> suggesstions = data.where((element) {
final result = element.toLowerCase();
final input = query.toLowerCase();
return result.contains(input);
}).toList();
return ListView.builder(
itemCount: suggesstions.length,
itemBuilder: (context,index){
final suggestion = suggesstions[index];
return ListTile(
title: Text(suggestion),
onTap: (){
query = suggestion;
showResults(context);
},
);
}
);
}
}
class MySearch extends SearchDelegate{ List<String> data = [ 'A','B','C','D','E','F','G','H','I','J' ]; @override List<Widget>? buildActions(BuildContext context) => [ IconButton( icon: const Icon(Icons.clear,color: Colors.red,), onPressed: () { if(query.isEmpty){ close(context, null); }else{ query = ''; } }, ), ]; @override Widget? buildLeading(BuildContext context) => IconButton( icon: const Icon(Icons.arrow_back), onPressed: () { close(context, null) ; }, ); @override Widget buildResults(BuildContext context) => Center( child: Text( query, ), ); //flutter search bar with listview @override Widget buildSuggestions(BuildContext context) { List<String> suggesstions = data.where((element) { final result = element.toLowerCase(); final input = query.toLowerCase(); return result.contains(input); }).toList(); return ListView.builder( itemCount: suggesstions.length, itemBuilder: (context,index){ final suggestion = suggesstions[index]; return ListTile( title: Text(suggestion), onTap: (){ query = suggestion; showResults(context); }, ); } ); } }
class MySearch extends SearchDelegate{

  List<String> data = [
    'A','B','C','D','E','F','G','H','I','J'
  ];

  @override
  List<Widget>? buildActions(BuildContext context) => [
    IconButton(
        icon: const Icon(Icons.clear,color: Colors.red,),
        onPressed: () {
          if(query.isEmpty){
            close(context, null);
          }else{
            query = '';
          }
        },
  ),
  ];

  @override
  Widget? buildLeading(BuildContext context) => IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () { close(context, null) ; },
  );

  @override
  Widget buildResults(BuildContext context) => Center(
    child: Text(
      query,

    ),
  );

  //flutter search bar with listview
  @override
  Widget buildSuggestions(BuildContext context) {

    List<String> suggesstions = data.where((element) {
      final result = element.toLowerCase();
      final input = query.toLowerCase();

      return result.contains(input);

    }).toList();

    return ListView.builder(
       itemCount: suggesstions.length,
        itemBuilder: (context,index){
          final suggestion = suggesstions[index];
          return ListTile(
            title: Text(suggestion),
            onTap: (){
              query = suggestion;

              showResults(context);
            },
          );
        }
    );
  }

}


Complete source – Flutter add search bar in appbar

main.dart

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
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',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Search Bar"),
actions: [
IconButton(onPressed: (){
showSearch(context: context, delegate: MySearch());
}, icon: const Icon(Icons.search))
],
),
);
}
}
class MySearch extends SearchDelegate{
// this is manual list of query for suggesting user.
List<String> data = [
'A','B','C','D','E','F','G','H','I','J'
];
@override
List<Widget>? buildActions(BuildContext context) => [
IconButton(
icon: const Icon(Icons.clear,color: Colors.red,),
onPressed: () {
if(query.isEmpty){
close(context, null);
}else{
query = '';
}
},
),
];
@override
Widget? buildLeading(BuildContext context) => IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () { close(context, null) ; },
);
@override
Widget buildResults(BuildContext context) => Center(
child: Text(
query,
),
);
@override
Widget buildSuggestions(BuildContext context) {
// will show a query hint suggestion "flutter search bar with listview"
List<String> suggesstions = data.where((element) {
final result = element.toLowerCase();
final input = query.toLowerCase();
return result.contains(input);
}).toList();
return ListView.builder(
itemCount: suggesstions.length,
itemBuilder: (context,index){
final suggestion = suggesstions[index];
return ListTile(
title: Text(suggestion),
onTap: (){
query = suggestion;
showResults(context);
},
);
}
);
}
}
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', debugShowCheckedModeBanner: false, theme: ThemeData( primarySwatch: Colors.blue, ), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { const MyHomePage({Key? key}) : super(key: key); @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Search Bar"), actions: [ IconButton(onPressed: (){ showSearch(context: context, delegate: MySearch()); }, icon: const Icon(Icons.search)) ], ), ); } } class MySearch extends SearchDelegate{ // this is manual list of query for suggesting user. List<String> data = [ 'A','B','C','D','E','F','G','H','I','J' ]; @override List<Widget>? buildActions(BuildContext context) => [ IconButton( icon: const Icon(Icons.clear,color: Colors.red,), onPressed: () { if(query.isEmpty){ close(context, null); }else{ query = ''; } }, ), ]; @override Widget? buildLeading(BuildContext context) => IconButton( icon: const Icon(Icons.arrow_back), onPressed: () { close(context, null) ; }, ); @override Widget buildResults(BuildContext context) => Center( child: Text( query, ), ); @override Widget buildSuggestions(BuildContext context) { // will show a query hint suggestion "flutter search bar with listview" List<String> suggesstions = data.where((element) { final result = element.toLowerCase(); final input = query.toLowerCase(); return result.contains(input); }).toList(); return ListView.builder( itemCount: suggesstions.length, itemBuilder: (context,index){ final suggestion = suggesstions[index]; return ListTile( title: Text(suggestion), onTap: (){ query = suggestion; showResults(context); }, ); } ); } }
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',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home:  MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Search Bar"),
        actions: [
          IconButton(onPressed: (){
            showSearch(context: context, delegate: MySearch());
          }, icon: const Icon(Icons.search))
        ],
      ),
    );
  }
}

class MySearch extends SearchDelegate{
  // this is manual list of query for suggesting user.
  List<String> data = [
    'A','B','C','D','E','F','G','H','I','J'
  ];

  @override
  List<Widget>? buildActions(BuildContext context) => [
    IconButton(
        icon: const Icon(Icons.clear,color: Colors.red,),
        onPressed: () {
          if(query.isEmpty){
            close(context, null);
          }else{
            query = '';
          }
        },
  ),
  ];

  @override
  Widget? buildLeading(BuildContext context) => IconButton(
    icon: const Icon(Icons.arrow_back),
    onPressed: () { close(context, null) ; },
  );

  @override
  Widget buildResults(BuildContext context) => Center(
    child: Text(
      query,
    ),
  );

  @override
  Widget buildSuggestions(BuildContext context) {
     // will show a query hint suggestion "flutter search bar with listview"
    List<String> suggesstions = data.where((element) {

      final result = element.toLowerCase();
      final input = query.toLowerCase();

      return result.contains(input);

    }).toList();

    return ListView.builder(
       itemCount: suggesstions.length,
        itemBuilder: (context,index){
          final suggestion = suggesstions[index];
          return ListTile(
            title: Text(suggestion),
            onTap: (){
              query = suggestion;

              showResults(context);
            },
          );
        }
    );
  }
}