search_app_bar 1.0.2+1

An animated SearchAppBar library that makes it easy to control the search for any type of data in a list of elements.

search_app_bar

An animated SearchAppBar Widget, to be used with Flutter.

Usage

Simply use the SearchAppBar widget as a regular AppBar. The only required attribute in the widget is called searcher.

You must implement the Searcher interface in a class of yours, to control the list of data and react to the list filtering provided by SearchAppBar.

import 'package:flutter/material.dart';
import 'package:search_app_bar/filter.dart';
import 'package:search_app_bar/search_app_bar.dart';

import 'home_bloc.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Search App Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(
        title: 'Search App Bar Demo',
        bloc: HomeBloc(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  final HomeBloc bloc;

  MyHomePage({
    this.title,
    this.bloc,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SearchAppBar<String>(
        title: Text(title),
        searcher: bloc,
        filter: Filters.startsWith,
        iconTheme: IconThemeData(color: Colors.white),
      ),
      body: StreamBuilder<List<String>>(
        stream: bloc.filteredData,
        builder: (context, snapshot) {
          if (!snapshot.hasData) return Container();
          final list = snapshot.data;
          return ListView.builder(
            itemBuilder: (context, index) {
              return ListTile(
                title: Text(list[index]),
              );
            },
            itemCount: list.length,
          );
        },
      ),
    );
  }
}

Below is an example of a HomeBloc class that implements Searcher: (This example also uses the bloc_pattern library to implement a bloc class)

import 'package:bloc_pattern/bloc_pattern.dart';
import 'package:rxdart/subjects.dart';
import 'package:search_app_bar/searcher.dart';

class HomeBloc extends BlocBase implements Searcher<String> {
  final _filteredData = BehaviorSubject<List<String>>();

  final dataList = [
    'Thaís Fernandes',
    'Vinicius Santos',
    'Gabrielly Costa',
    'Olívia Sousa',
    'Diogo Lima',
    'Lucas Assunção',
    'Conceição Cardoso'
  ];

  Stream<List<String>> get filteredData => _filteredData.stream;

  HomeBloc() {
    _filteredData.add(dataList);
  }

  @override
  get onDataFiltered => _filteredData.add;

  @override
  get data => dataList;

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

Disclaimer

This small library was developed (and later, improved) based on the excellent tutorial provided by Nishant Desai at: https://blog.usejournal.com/change-app-bar-in-flutter-with-animation-cfffb3413e8a

All due credit goes to him :)