Flutterにてボタンの制御／ボタンテキストを動的に変える方法〔実装Movie付〕

Flutterのボタン制御をDynamicに変える方法を紹介します。

実装イメージ

↓↓↓以下のムービーは実装イメージです。↓↓↓

上記のWidgetを使った実装を他にも紹介しています。
一緒に見ていただけると嬉しいです！

【Flutter】カスタムラジオボタンを作成する方法〔実装イメージvideo付き！〕

Flutterでカスタムラジオボタン(CustomRadioButton)を作成しました。実装ソースとそのソースがどういう意味を持っているかを説明していきます。実装イメージ以下のようなボタンがありつつも、それらはラ...

atsu-developer.net

2022.11.17

【Flutter】TextFieldをキーボードにてフォーカスを変える方法〔nextとdone〕

FlutterのTextFieldを複数並べたときに、キーボード上の「次へ・確定」ボタンを押下するだけで次のTextFieldや画面遷移をさせる方法を紹介します。実装イメージ以下の操作手順をしたものをMovieにて表示しま...

atsu-developer.net

2022.11.17

実装方法

以下には実装のポイント／ソースを記載しています。

ポイント

ポイントは２つです。
それぞれを赤・黄にてハイライトしています。

• TextFieldの値が変わるたびにStateにて保持する_textの値を更新
• _textの状態によってElevateButtonの動作を動的に更新

TextFieldの値が変わるたびにStateにて保持する_textの値を更新

赤でハイライトしている箇所です。

TextFieldのonChangeイベントにてStateを更新するようにします。
基本的にはsetStateメソッドが動作することで、画面の描画が再レンダーされるものと覚えています。

_textの状態によってElevateButtonの動作を動的に更新

黄でハイライトしている箇所です。

_textの値によってonPressとTextの値を設定しています。
上記にて_textの値をsetStateにて動的に変更しているので、
変更されるたびにここで設定した条件を基にして、ボタンが非活性・ボタンのテキストが変わったり
しているのです！

なお、onPressにNullを設定するとボタンを非活性に設定できます。
また、条件式には三項演算子を使用しています。（条件式 ? Trueの動作 : falseの動作）　

ソースコード

import 'package:flutter/material.dart';

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

  @override
  State<TodoAddPage> createState() => _TodoAddPageState();
}
class _TodoAddPageState extends State<TodoAddPage> {
  String _text = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            TextFormField(
              textInputAction: TextInputAction.next,
              onChanged: ((String value) {
                setState(() {
                  _text = value;
                });
              }),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width / 2,
              child: ElevatedButton(
                onPressed: _text.isEmpty ? null : () {},
                child: _text.isEmpty ? Text('Todoを決めましょう') : Text('追加'),
              ),
            )
          ],
        ),
      ),
    );
  }
}

終わり