アプリ開発

【Flutter】アプリに超簡単な検索機能を実装してみよう

flutterで簡単なアプリを実装する方法を紹介していこうと思います。

超基本的な作り方なので、この記事の内容をベースに作っていってもらえれば幸いです。

コピペしてもらってOKです!

最後にCodePenで検索の挙動を実際に体感できるので、理解しやすいと思います。

検索機能の実装

コードは以下のようになります。

class TestScreen extends StatefulWidget {
  @override
  _TestScreenState createState() => _TestScreenState();
}

class _TestScreenState extends State<TestScreen> {
  
  List<String> sourceList = [
    'とまと',
    'ぬいぐるみ',
    'クローゼット',
    'ズボン',
    'さくらんぼ',
    'elephant',
    'face',
    'forest',
    'peace',
    'Congratulations',
  ];

  List<String> searchedList = [
    'とまと',
    'ぬいぐるみ',
    'クローゼット',
    'ズボン',
    'さくらんぼ',
    'elephant',
    'face',
    'forest',
    'peace',
    'Congratulations',
  ];

  void onChange(String text) {
    if (text != null && text != '') {
      //入力したテキストを含む単語のみを入れ直す
      setState(() {
        searchedList = [];
        searchedList
            .addAll(sourceList.where((element) => element.contains(text)));
      });
    } else {
      //何も入力されていない場合には、全単語を表示
      setState(() {
        searchedList = sourceList;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text("検索機能の実装"),
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
                color: Colors.yellow[100],
                child: Padding(
                  padding: const EdgeInsets.all(16),
                  child: TextField(
                    onChanged: onChange,
                  ),
                )),
            SizedBox(
              height: 20,
            ),
            for (var i = 0; i < searchedList.length; i++)
              Center(child: Text(searchedList[i]))
          ],
        ));
  }
}

containsを使おう

(文字列).contains(検索テキスト)

というようなコードを書いてやると、検索テキストが文字列に含まれている場合はtrue、そうでない場合はfalseになります。

従って、入力したテキストを含む文字列のみを表示するコードを書いてやれば、簡単な検索機能の実装完了です!

検索後の挙動

初期状態

検索するためのテキストが入力されていない状態では、全ての候補が表示されています。

もしも、初期状態で何も表示したくないのであれば、上のコードのsearchedListを[](空っぽ)にしておけばOKです!

検索後

10個の単語リストのなかで、「と」を含むのは、”とまと”だけなので、表示される単語は一つのみです。

上の写真のように「a」を含むのは、

“elephant”、 ”face”、”peace”、”Congratulations”の4つです。

ちゃんと4つとも表示されていますね。

 

追記

コードペンを導入してみました!

実際に文字を入れて、検索してみてください。

入力した文字が含まれている単語のみが表示されると思います。

See the Pen
検索機能
by maaku saitou (@makumaaku-the-selector)
on CodePen.

まとめ

いかがでしたでしょうか?

flutterで検索機能の実装の仕方は理解できましたでしょうか。

containsを使う

これがポイントです。

ぜひ試してみてください!