[Flutter]AlertDialog（アラートダイアログ）でTextField（テキストフィールド）を使う方法

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

AlertDialogでTextFieldを使う方法を紹介します。

方法

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

AlertDialogでTextFieldを使うには、まずダイアログを表示するウェジェットで変数を用意しておきます。

  var _editText = '';
  var _alertText = '';

AlertDialogのTextFieldで入力するための変数と保存するための変数を用意します。

次に、AlertDialogにテキストフィールドを実装します。

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

TextFieldの文字列が変わったら、編集用の変数を変えるようにします。

最後に、キャンセルボタンと完了ボタンを実装します。

キャンセルボタンは、単にボタンを閉じる処理をします。

そして、完了ボタンでは、保存用の変数に、編集用の変数の値を格納するようにします。

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(() {
          _alertText = _editText; //編集用を保存用に
        });
        Navigator.pop(context);
      },
      child: Text('OK'),
    ),
  ],
),

これでアラートダイアログでテキストフィールドを使うことが出来ます。

以下は、使用例です。

  var _editText = '';
  var _alertText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text("アラートテキスト : $_alertText"),
            ElevatedButton(
              onPressed: () {
                showDialog(
                  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(() {
                            _alertText = _editText;
                          });
                          Navigator.pop(context);
                        },
                        child: Text('OK'),
                      ),
                    ],
                  ),
                );
              },
              child: Text('Button'),
            )
          ],
        ),
      ),
    );
  }