[Flutter]AlertDialogで文字入力(text input)をするには？

どうも、ちょげ(@chogetarou)です。

AlertDialogで文字入力をする方法を紹介します。

方法

インターフェース, インターネット, プログラム, ブラウザ, Www, グラフィック, フラットなデザイン

AlertDialogで文字入力をするには、「TextField」を使います。

まず、表示するStatefulWidgetで、変数を用意します。

  var _editText = ''; //編集用
  var _saveText = ''; //保存用

変数は、編集用と保存用の２つを用意します。

次に、AletDialogの引数「contents」、もしくは引数「title」にTextFieldを指定します。

TextFieldの「onChanged」では、編集用の変数に値を格納しておく処理をします。

builder: (BuildContext context) => AlertDialog(
  title: Text('Alert'),
  content: TextField(
    onChanged: (value) {
      setState(
        () {
          _editText = value;
        },
      );
    },
  ),
)

ここまでで、AlertDialogで文字入力ができるようになります。

最後に、閉じるボタンと保存ボタンを作ります。

builder: (BuildContext context) => AlertDialog(
  title: Text('Alert'),
  content: TextField(
    onChanged: (value) {
      setState(
        () {
          _editText = value;
        },
      );
    },
  ),
  actions: [
    TextButton(
      onPressed: () {
        Navigator.pop(context); //閉じる
      },
      child: Text('キャンセル'),
    ),
    TextButton(
      onPressed: () {
        setState(
          () {
            _saveText = _editText; //保存
            Navigator.pop(context); //閉じる
          },
        );
      },
      child: Text('保存'),
    )
  ],
),

保存ボタンでは、保存用の変数に編集用の変数の値を格納する処理をします。

これでAlertDialogで文字入力をして、閉じた後のウェジェットでその文字を使用できるようになります。

以下は、実際の使用例です。

  var _editText = '';
  var _saveText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(_saveText),
            ElevatedButton(
              onPressed: () async {
                showDialog<String>(
                  context: context,
                  builder: (BuildContext context) => AlertDialog(
                    title: Text('Alert'),
                    content: TextField(
                      onChanged: (value) {
                        setState(
                          () {
                            _editText = value;
                          },
                        );
                      },
                    ),
                    actions: [
                      TextButton(
                        onPressed: () {
                          Navigator.pop(context);
                        },
                        child: Text('キャンセル'),
                      ),
                      TextButton(
                        onPressed: () {
                          setState(
                            () {
                              _saveText = _editText;
                              Navigator.pop(context);
                            },
                          );
                        },
                        child: Text('保存'),
                      )
                    ],
                  ),
                );
              },
              child: Text('Button'),
            )
          ],
        ),
      ),
    );
  }