Flutter:どうしたらTextFieldに値が入っていないときにボタンを無効にできますか。

Question

実現したいこと
Dialog上のTextFieldに値が入っていない場合は、ボタンが無効。TextFieldに値が入っている場合は、ボタンが有効。

コードの説明
isButtonActiveが判定に使用しているフィールドです。

コード
以下が私のコードです。解決方法を教えていただけると有難いです。よろしくお願いいたします。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {

  // Flag
  bool isButtonActive = true;
  // Controller
  TextEditingController controller  = TextEditingController();

  @override
  void initState() {
    super.initState();
 
    controller.addListener(() {
      final isButtonActive = controller.text.isNotEmpty;
      setState(() => this.isButtonActive = isButtonActive);
      print(
          "initState : Controller => ${controller.text} , bool => ${isButtonActive}");
    });
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          child: Text('Button'),
          onPressed: () {
            openDialog();
          },
        ),
      ),
    );
  }

  Future openDialog() => showDialog(
      context: context,
      builder: (context) {
        return StatefulBuilder(
          builder: (context, setState) {
            return AlertDialog(
              shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.all(Radius.circular(0))),
              titlePadding: EdgeInsets.all(0.0),
              title: Container(
                padding: EdgeInsets.all(8.0),
                color: Colors.blue,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [Text("Title", style: TextStyle(color: Colors.white))],
                ),
              ),
              content: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text("URL"),
                  Container(
                    width: 400,
                    child: TextField(
                      /// Controller
                      controller: controller,
                      autofocus: true,
                    ),
                  ),
                ],
              ),
              actions: [
                ElevatedButton(
                    onPressed: isButtonActive
                        ? () => {setState(() => isButtonActive = false)}
                        : null,
                    child: Text("SEND")),
              ],
            );
          },
        );
      }).then((value) => setState(() {}));
}

イメージ画像

Answer 1

initStateの中でsetStateを記述しているので、再構築対象は_MyStatefulWidgetStateの方です。(_MyStatefulWidgetStateに用意されているsetStateが使われる)

ダイアログの中身を再構築対象とするには、StatefulBuilderの内側builderで呼び出される関数の中でsetStateを記述しないといけません。

私だったらTextFieldにonChangedを追加し、そこで入力した値によりisButtonActiveを変更するようにします。

                    child: TextField(
                      /// Controller
                      controller: controller,
                      autofocus: true,
                      onChanged: (value) {
                        setState(() {
                          isButtonActive = value.isNotEmpty;
                        });
                      },
                    ),

Comments

[junad]

回答していただきありがとうございます。おかげさまで解決することができました！