Flutterのボタン制御をDynamicに変える方法を紹介します。
実装イメージ
↓↓↓以下のムービーは実装イメージです。↓↓↓
上記のWidgetを使った実装を他にも紹介しています。
一緒に見ていただけると嬉しいです!
実装方法
以下には実装のポイント/ソースを記載しています。
ポイント
ポイントは2つです。
それぞれを赤・黄にてハイライトしています。
- 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('追加'),
),
)
],
),
),
);
}
}
終わり
コメント