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});}