Flutter flappy_search_barの使い方

20210523更新
　flappy_search_barがDISCONTINUEDになっている
　代替でFlappy_search_bar_forkを使用する

20210921更新

flappy_search_barの使い方

Flutter のパッケージであるflappy_search_barの使い方の忘却録

開発環境

PC : macOS Catalina
エディター : Visual Studio Code
Flutter : 1.22.1
flappy_search_bar : 1.7.2(2021/2/16 現在の最新バージョン)

製作物

下記画像のような検索バーを作成

検索時

コード

pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  flappy_search_bar: ^1.7.2  <- 追加
       ・
       ・
       ・

main.dart

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

void main() => runApp(
      MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MyHomePage(),
      ),
    );

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State {
  var _itemsizeheight = 65.0;
  var posSelected = 0;

  final _searchBarController = SearchBarController();

  List<String> exampleList = [
    'Axvfgfdg',
    'Axvfgfdg3',
    'Bsdadasd',
    'Axvfgfdg2',
    'Bsdadasd3',
    'Cat',
    'Bsdadasd2',
    'Cat2',
    'Cat3',
    'Dog',
    'Dog2',
    'Dog3',
    'Elephant',
    'Elephant2',
    'Elephant3',
    'Fans',
    'Girls',
    'Hiiii',
    'Ilu',
    'Jeans',
    'Kite',
    'Lion',
    'Men',
    'Nephow',
    'Owl',
    'Please',
    'Quat',
    'Rose',
    'Salt',
    'Trolly',
    'Up',
    'View',
    'Window',
    'Xbox',
    'Yellow',
    'Yummy',
    'Zubin',
    'Zara',
    'Fans2',
    'Girls2',
    'Hiiii2',
    'Ilu2',
    'Jeans2',
    'Kite2',
    'Lion2',
    'Men2',
    'Nephow2',
    'Owl2',
    'Please2',
    'Quat2',
    'Rose2',
    'Salt2',
    'Trolly2',
    'Up2',
    'View2',
    'Window2',
    'Xbox2',
    'Yellow2',
    'Yummy2',
    'Zubin2',
    'Zara2',
    'あいうえお',
    '12345'
  ];

  @override
  void initState() {
    exampleList.sort((a, b) {
      return a.toString().compareTo(b.toString());
    });
    super.initState();
  }

  // 検索する文字を含む文字列のリストを返す
  Future<List<String>> _search(String text) async {
    var tmpList = [];

    tmpList.addAll(
      exampleList.where(
        (element) => element.contains(text),
      ),
    );
    return tmpList;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SearchBar<String>(
          searchBarPadding: EdgeInsets.symmetric(horizontal: 10), 
          minimumChars: 1,    //検索時の最小文字数
          hintText: "検索",
          cancellationWidget: Text("キャンセル"),
          onSearch: _search,
          placeHolder: Center(      //デフォルトで表示する内容
            child: ListView.builder(
              itemCount: exampleList.length,
              itemExtent: _itemsizeheight,
              itemBuilder: (context, position) {
                return Card(
                  child: Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      exampleList[position],
                      style: TextStyle(fontSize: 20.0),
                    ),
                  ),
                );
              },
            ),
          ),
          //検索文字を含んでいた文字列をCardで表示
          onItemFound: (String word, int index) {
            return Card(
              child: Padding(
                padding: const EdgeInsets.all(20.0),
                child: Text(
                  word,
                  style: TextStyle(fontSize: 14.0),
                ),
              ),
            );
          },
          // 検索時のローディング
          loader: Center(
            child: Text("loading..."),
          ),
          // 検索でエラーになった時
          onError: (error) {
            print(error);
            return Center(
              child: Text("Error occurred : $error"),
            );
          },
        ),
      ),
    );
  }
}

参考