Flutter: テキストボックスにオートコンプリート機能をつける

プログラミング
スポンサーリンク




こんにちは、おみです。

今回は、Flutterでテキストボックスにオートコンプリート機能をつける方法について、紹介していきたいと思います。

↓完成イメージです

スポンサーリンク

下準備

下記のライブラリをインポートしてください。

flutter_typeahead | Flutter Package
A highly customizable typeahead (autocomplete) text input field for Flutter

 

 

ソースコード(関係ある箇所を抜粋)

class OpponentContainer extends StatefulWidget {
  OpponentContainer({Key key, this.title}) : super(key: key);

  final String title;

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

class _OpponentState extends State<OpponentContainer> {
  // formキー
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  // 変数を宣言
  TextEditingController _nameController;

  // 存在するポケモンかを判定した結果を格納
  bool _validateError = false;

  // 候補にマッチする文字列をリストから取得する 
  // pokemonList ... 候補となる文字列一覧(別クラスで定義)
  List<String> _getSuggestions(String query) {
    List<String> matches = List();

    matches.addAll(pokemonList);

    matches.retainWhere((s) => s.contains(hiraToKana(query)));
    return matches;
  }

  @override
  void initState() {
    super.initState();
    _nameController = new TextEditingController(text: '');
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        margin: EdgeInsets.all(10.0),
        padding: EdgeInsets.all(10.0),
        color: Colors.black12,
        child: Form(
          key: _formKey,
          child: Column(
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(20),
                child: TypeAheadFormField(
                    textFieldConfiguration: TextFieldConfiguration(
                      controller: _nameController,
                      decoration: InputDecoration(labelText: "相手のポケモン名"),
                      // テキストボックスに値を入力するたびに起動
                      onChanged: (value) async {
                        _validateError = await textFieldValidate(value);
                        _formKey.currentState.validate();
                        setState(() {});
                      },
                    ),
                    // 入力した値にマッチングするものを取得
                    suggestionsCallback: (pattern) {
                      return _getSuggestions(pattern);
                    },
                    
                    // マッチング結果を画面に表示
                    itemBuilder: (context, suggestion) {
                      return ListTile(
                        title: Text(suggestion),
                      );
                    },
                    
                    transitionBuilder: (context, suggestionsBox, controller) {
                      return suggestionsBox;
                    },
                    
                    // 候補をタップしたときに起動
                    onSuggestionSelected: (suggestion) async {
                      _nameController.text = suggestion;
                      _validateError = await textFieldValidate(suggestion);
                      _formKey.currentState.validate();
                      setState(() {});
                    },
                    
                    // テキストへの入力を確定したときに起動
                    onSaved: (value) async {
                      _nameController.text = value;
                      _validateError = await textFieldValidate(value);
                      _formKey.currentState.validate();
                      setState(() {});
                    },

                    // 存在するポケモン名が入力されているかをチェック
                    // ignore: missing_return
                    validator: (value) {
                      if (!_validateError) {
                        return "存在するポケモンを入力してください";
                      }
                    }),
              ),
            ],
          ),
        ));
  }
}
// ひらがなからカタカナへ変換
String hiraToKana(String str) {
  return str.replaceAllMapped(new RegExp("[ぁ-ゔ]"), (Match m) => String.fromCharCode(m.group(0).codeUnitAt(0) + 0x60));
}

 

 

参考文献

https://www.366service.com/jp/qa/5513d0c88326825ee6b8814ad79ef9ea

 

 

おすすめの書籍

私は、Flutterの勉強をする際、下記の書籍を使用しています。

Flutterを使用したアプリ開発の方法を、実際にアプリの開発を通してわかりやすく解説しているので、おすすめです。

コメント

タイトルとURLをコピーしました