Search in List View In Flutter

Search in List View In Flutter :

Search in List View In Flutter : Today we Learn about how to create search In list view in flutter.using flutter you can design a beautiful and attractive ui of search in list view in flutter

simply for the search type any word o the search box if any matching word or character found then it display it. in this flutter tutorial i set the icon color blue with slide able search.if any matching character found then you can see it as a red color.

the final result and the code for design search in list view in flutter is given below.to know more study continuously this flutter tutorial

i hope the demo of the search in list view in flutter is very helpful for the beginner

Screenshot 1:

Search in List View In Flutter

Screenshot 2:

Search in List View In Flutter
dependencies:
  flutter_slidable:
  pull_to_reveal:
  substring_highlight:

searchable_slideable_list.dart

import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
import 'package:pull_to_reveal/pull_to_reveal.dart';

typedef Widget BuildHighlight(String term);

class SearchableListTile {
  SearchableListTile({this.buildHighlight, this.buildNolight, this.text})
      : assert(text != null);

  final BuildHighlight buildHighlight;
  final Function buildNolight;
  final String text;
}

class SearchableSlideableList extends StatefulWidget {
  SearchableSlideableList({this.list});

  final List<SearchableListTile> list;

  @override
  _SearchableSlideableListState createState() =>
      _SearchableSlideableListState();
}

class _SearchableSlideableListState extends State<SearchableSlideableList> {
  String _filter;
  TextEditingController searchController;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: PullToRevealTopItemList(
          dividerBuilder: (BuildContext context) {
            return Container(
              alignment: Alignment.topLeft,
              padding: EdgeInsets.all(10),
              child: Text('Items', style: Theme.of(context).textTheme.headline),
            );
          },
          itemCount: widget.list.length,
          revealableHeight: 50,
          itemBuilder: (context, index) {
            SearchableListTile slt = widget.list[index];
            if (_filter != null && _filter.isNotEmpty) {
              if (slt.text.contains(_filter)) {
                return slt.buildHighlight(_filter);
              } else {
                return Container();
              }
            }

            return Slidable(
              key: ValueKey(index),
              actionPane: SlidableDrawerActionPane(),
              actions: <Widget>[
                IconSlideAction(
                  caption: 'Archive',
                  color: Colors.blue,
                  icon: Icons.archive,
                ),
                IconSlideAction(
                  caption: 'Share',
                  color: Colors.indigo,
                  icon: Icons.share,
                ),
              ],
              secondaryActions: <Widget>[
                IconSlideAction(
                  caption: 'More',
                  color: Colors.grey.shade200,
                  icon: Icons.more_horiz,
                ),
                IconSlideAction(
                  caption: 'Delete',
                  color: Colors.red,
                  icon: Icons.delete,
                ),
              ],
              dismissal: SlidableDismissal(
                child: SlidableDrawerDismissal(),
              ),
              child: slt.buildNolight(),
            );
          },
          revealableBuilder: (BuildContext context, RevealableToggler opener,
              RevealableToggler closer, BoxConstraints constraints) {
            return Row(
              key: Key('scrollable-row'),
              children: <Widget>[
                SizedBox(width: 10),
                Flexible(
                  child: TextFormField(
                    controller: searchController,
                    decoration: InputDecoration(
                      hintText: 'Search',
                      suffixIcon: Icon(Icons.search,
                          color: Theme.of(context).backgroundColor),
                    ),
                  ),
                ),
                IconButton(
                  icon: Icon(Icons.cancel),
                  onPressed: () {
                    // Handles closing the `Revealable`
                    closer(completer: RevealableCompleter.snap);
                    // Removes any filtering effects
                    searchController.text = '';
                    setState(() {
                      _filter = null;
                    });
                  },
                )
              ],
            );
          }),
    );
  }

  @override
  void dispose() {
    super.dispose();
  }

  @override
  void initState() {
    searchController = TextEditingController();
    searchController.addListener(_onSearch);
    super.initState();
  }

  void _onSearch() {
    setState(() {
      _filter = searchController.text;
    });
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:substring_highlight/substring_highlight.dart';

import 'searchable_slideable_list.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Searchable Slidable List Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<SearchableListTile> list = names.map((String s) {
      return SearchableListTile(
          buildHighlight: (String term) {
            return Container(
                padding: EdgeInsets.all(10),
                child: SubstringHighlight(term: term, text: "($s)"));
          },
          buildNolight: () {
            return Container(padding: EdgeInsets.all(10), child: Text('$s'));
          },
          text: s);
    }).toList();

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Searchable Slidable List Demo'),
      ),
      body: SearchableSlideableList(list: list),
    );
  }
}

const List<String> names = [
  "michael",
  "james",
  "john",
  "robert",
  "david",
  "william",
  "mary",
  "christopher",
  "joseph",
  "richard",
  "daniel",
  "thomas",
  "matthew",
  "jennifer",
  "charles",
  "anthony",
  "patricia",
  "linda",
  "mark",
  "elizabeth",
  "joshua",
  "steven",
  "andrew",
  "kevin",
  "brian",
  "barbara",
  "jessica",
  "jason",
  "susan",
  "timothy",
  "paul",
  "kenneth",
  "lisa",
  "ryan",
  "sarah",
  "karen",
  "jeffrey",
  "donald",
  "ashley",
  "eric",
  "jacob",
  "nicholas",
  "jonathan",
  "ronald",
  "michelle",
  "kimberly",
  "nancy",
  "justin",
  "sandra",
  "amanda",
  "brandon",
  "stephanie",
  "emily",
  "melissa",
  "gary",
  "edward",
  "stephen",
  "scott",
  "george",
  "donna",
  "jose",
  "rebecca",
  "deborah",
  "laura",
  "cynthia",
  "carol",
  "amy",
  "margaret",
  "gregory",
  "sharon",
  "larry",
  "angela",
  "maria",
  "alexander",
  "benjamin",
  "nicole",
  "kathleen",
  "patrick",
  "samantha",
  "tyler",
  "samuel",
  "betty",
  "brenda",
  "pamela",
  "aaron",
  "kelly",
  "heather",
  "rachel",
  "adam",
  "christine",
  "zachary",
  "debra",
  "katherine",
  "dennis",
  "nathan",
  "christina",
  "julie",
  "jordan",
  "kyle",
  "anna",
];

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in