How To Filter Or Search Listview Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

Search Bar filter is one of the most popular filter techniques used in mobile applications. In search bar filters we would use TextField widgets to filter complete JSON or Static List data. Every time when user types something in TextInput widget it would start searching that particular word or character in List and show only matched data. This searching technique is fully non case sensitive so not matter your data in capital or small format it will filter them all. In current tutorial we are using Local list items array and filter them but in upcoming tutorials we would apply same filter technique on JSON arrays.

How To Filter Or Search Listview Using Flutter Android App

Filter Or Search Listview 
Complete Code For Filter Or Search Listview  In Flutter
Main.dart

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController _textController = TextEditingController();

  final List<String> _listViewData = [
    "Flutter",
    "Laravel",
    "php",
    "Python",
    "wordPree",
    "Mysql",
    "Oracle",
    "HTML",
    "Css",
    "Bootstrap",
  ];

  List<String> _newData = [];

  _onChanged(String value) {
    setState(() {
      _newData = _listViewData
          .where((string) => string.toLowerCase().contains(value.toLowerCase()))
          .toList();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.orange[800],
        title: Text('ListView Filter/Search'),
      ),
      body: Column(
        children: <Widget>[
          SizedBox(height: 15.0),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(

              controller: _textController,
              decoration: InputDecoration(
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                  borderSide: BorderSide(color: Colors.black26),
                ),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                  borderSide: BorderSide(color: Colors.grey),
                ),
                contentPadding: EdgeInsets.all(15),
                hintText: 'Enter text here',
                hintStyle: TextStyle(color: Colors.black45, fontSize: 15)
              ),
              onChanged: _onChanged,
            ),
          ),
          SizedBox(height: 20.0),
          _newData != null && _newData.length != 0
              ? Expanded(
            child: ListView(
              padding: EdgeInsets.all(10.0),
              children: _newData.map((data) {
                return ListTile(title: Text(data));
              }).toList(),
            ),
          )
              : SizedBox(),
        ],
      ),
    );
  }
}

Related Post