Flutter Search ListView - Listview Filter
Search option in app is mandatory to make your app user friendly. Adding Search functionality to your Flutter app is very easy. This example demonstrates a search widget consuming and displaying data from a list of items. This is a very basic implementation of search in a list . This demo implements search in list enabling the users to choose any text from a list and perform search within the chosen text.
How Flutter Search Works?
Flutter provides a simple (but powerful) way to embed a search box in your app. Searching is decoupled from the source of the data, so your search implementation can improve without affecting your underlying data layer. In order to add a search option to your list, you will need a TextEditingController instance. The recommended way to obtain one is through a call to getControllerWithInitialQuery . You then configure an instance of this controller with your query string and its desired icon.I'm going to walk you through the process of implementing search option from a list.Let's start our journey.
Implementation:
First of all, create a new project on flutter. Open CMD and type flutter create search_app and hit enter. Now open your project in Visual Studio Code. This is very basic and you may familiar with it, because you are a beginner flutter developer. Here is the source code of main.dart file for searching in a List. Simply copy it and Explore by implimenting in your project.
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData.dark(),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State createState() => _MyHomePageState();
}
class _MyHomePageState extends State {
TextEditingController controller = new TextEditingController();
List list = [
Users(name: "Mr. Orkitt" ,subTitle: 'Flutter developer', image: "https://cdn.pixabay.com/photo/2016/11/21/14/53/man-1845814_960_720.jpg" , isFavourite: true),
Users(name: "John" ,subTitle: 'Github.com', image: "https://cdn.pixabay.com/photo/2015/01/06/16/14/woman-590490_960_720.jpg" , isFavourite: true),
Users(name: "Alina" ,subTitle: 'Marketing guy', image: "https://cdn.pixabay.com/photo/2017/04/05/10/45/girl-2204622_960_720.jpg" , isFavourite: false),
Users(name: "Escort" , subTitle: 'Java developer',image: "https://cdn.pixabay.com/photo/2017/12/01/08/02/paint-2990357_960_720.jpg" , isFavourite: true),
Users(name: "Dave Johnson" , subTitle: 'Blockchain is new trend',image: "https://cdn.pixabay.com/photo/2016/03/26/22/13/man-1281562_960_720.jpg" , isFavourite: true),
Users(name: "John Elia" ,subTitle: 'Exploring world', image: "https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_960_720.jpg" , isFavourite: false),
Users(name: "Aizaz khan" ,subTitle: 'TRS on Fiverr', image: "https://cdn.pixabay.com/photo/2021/11/09/15/54/man-6781827_960_720.jpg" , isFavourite: false),
Users(name: "Burlin" ,subTitle: 'Money hiest', image: "https://cdn.pixabay.com/photo/2021/03/02/16/34/woman-6063087_960_720.jpg" , isFavourite: true),
Users(name: "John Wick" ,subTitle: 'Who kill my dog', image: "https://cdn.pixabay.com/photo/2020/05/17/20/21/cat-5183427_960_720.jpg" , isFavourite: false),
Users(name: "Tokiyo" ,subTitle: 'Capital of Japan', image: "https://cdn.pixabay.com/photo/2021/05/01/09/59/city-6220689_960_720.jpg" , isFavourite: true),
] ;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20 , vertical: 10),
child: CupertinoSearchTextField(
placeholder: 'Search',
onChanged: (value){
print(value);
setState(() {
});
},
onSubmitted: (value){
},
controller: controller,
),
),
Expanded(
child: ListView.builder(
itemCount: list.length,
itemBuilder: (context , index){
String name = list[index].name ;
if(controller.text.isEmpty){
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(list[index].image),
),
title: Text(list[index].name),
subtitle: Text(list[index].subTitle),
trailing: list[index].isFavourite ? Icon(Icons.favorite , color: Colors.red.shade600,) : Icon(Icons.favorite_border),
);
}else if(name.toLowerCase().contains(controller.text.toLowerCase())){
return ListTile(
leading: CircleAvatar(
backgroundImage: NetworkImage(list[index].image),
),
title: Text(list[index].name),
subtitle: Text(list[index].subTitle),
trailing: list[index].isFavourite ? Icon(Icons.favorite , color: Colors.red.shade600,) : Icon(Icons.favorite_border),
);
}else {
return Container();
}
}))
],
),
),
),
),
);
}
}
class Users {
String name, image , subTitle ;
bool isFavourite;
Users({required this.name , required this.isFavourite , required this.image , required this.subTitle});
}