Searchable Slideable In Flutter

Searchable Slideable In Flutter :

Screenshot 1:

Screenshot 2:

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