Filter Chipを使って検索ワードを選ぶ

大きな目標

Flutterで蒐集したデータをMySQLでアーカイブ化、Flutterから検索した結果をUnity上で三次元表示し、開架の図書館内を歩きながら本を手に取ってみるような表現を目指す。

中期的な目標

データベースに無関心なuserが入力しても適切なデータを蒐集できるフロントをFlutterで作る。

今日の目標

既に登録されている検索ワードをアーカイブから呼び出して表示し、そこから選んで新たなデータにタグ付けする。適切な検索ワードがないときは、ユーザーが追加できる。

まずは使ったことのあるListViewから

• 検索ワードを呼び出して表示
• 追加するためのTextFormField、入力された語句をDBに追加。再呼び出しで表示。

ここまではスムーズにできたのだが･･･

• ワードが増えていくことを前提に、ListViewよりコンパクトな表示になりそうなchipを試す。
• 最初に見たChoiceChipは一つしか選べない（最近選べなくなった？）らしいので、複数選択が可能なFilterChipを選択。

https://api.flutter.dev/flutter/material/FilterChip-class.html

• Sampleの直打ちListを不特定多数の検索結果に差し替えるのでかなり難渋した。

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: const Text('FilterChip Sample'),
      ),
      body: Center(
        child: Column(
          //mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            OutlinedButton(
              onPressed: _term,
              child: const Text('Show Terms'),
            ),
            const SizedBox(height: 5.0),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Wrap(
                spacing: 5.0,
                children: displayList.map<Widget>((data) {
                  return FilterChip(
                    label: Text(data['selectedTerm'] ?? ""),
                    selected: _filters.contains(data['selectedTerm'] ?? ""),
                    onSelected: (bool value) {
                      setState(() {
                        if (value) {
                          if (!_filters.contains(data['selectedTerm'] ?? "")) {
                            _filters.add(data['selectedTerm'] ?? "");
                          }
                        } else {
                          _filters.removeWhere((String term) {
                            return term == data['selectedTerm'] ;
                          });
                        }
                      });
                    },
                  );
                }).toList(),
              ),
            ),
            const SizedBox(height: 10.0),
            Text('Selected: ${_filters.join(', ')}'),
            Padding(
              padding: const EdgeInsets.all(30.0),
              child: Format(
                  hintText: 'term',
                  onChanged: (text) {
                    newTerm = text;
                  }
              ),
            ),
            OutlinedButton(
              onPressed: _insert,
              child: const Text('Add a New Term'),
            )

          ],
        ),
      ),
    );
  }

まとめ

選択した検索語をアーカイブするデータ本体にタグ付けするのは次回にお預け。