Index
ボタンを実装する前に、大事な3つのポイントがあります。
- stateful widgetはStatefulWidgetのサブクラスと、Stateのサブクラスから構成される
- stateクラスは変更可能なstate変数とbuild()メソッドを含む
- Widgetのstateが変更された時、widgetの再描画を伝えるためにsetState()メソッドが呼ばれる
ちなみにwidgetのざっくりした分類は以下の通りです。
- stateful widget:変化するwidget(ex button)
- stateless widget:変化しないwidget(ex Icon,Text)
以下のようにいいねボタンを押下すると、アイコンが変化し、数字も変化するコードを作っていきます。
まずはStatefulWidgetのサブクラス、FavoriteWidgetを作成していきます。
次のステップでFavoriteWidgetState()を作成するので、この時点で警告が出ていますが、気にしないでください。
|
1 2 3 4 5 6 |
class FavoriteWidget extends StatefulWidget { const FavoriteWidget({super.key}); @override _FavoriteWidgetState createState() => _FavoriteWidgetState();//stateオブジェクト作成のため必ずオーバーライドする } |
ではFavoriteWidgetを作成していきます。
大事な部分はコメントで記述しました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
class _FavoriteWidgetState extends State<FavoriteWidget> { //いいねボタンが押された時の処理 void _toggleFavorite() { setState(() { //いいねを外す処理 if (_isFavorite) { _favoriteCount -= 1; _isFavorite = false; } //いいねした時の処理 else { _favoriteCount += 1; _isFavorite = true; } }); } //最初の3つのポイントで挙げた通り必ず実装しましょう //stateによって変化させたいUIの定義をここに書いていく @override Widget build(BuildContext context) { return Row( mainAxisSize: MainAxisSize.min, children: [ Container( padding: const EdgeInsets.all(0), child: IconButton( padding: const EdgeInsets.all(0), alignment: Alignment.centerRight, //表示するアイコンをいいねの状態に合わせて変更している icon: (_isFavorite ? const Icon(Icons.star) : const Icon(Icons.star_border)), color: Colors.red[500], onPressed: _toggleFavorite, )), SizedBox( width: 18, child: SizedBox( child: Text('$_favoriteCount'),//カウントされている数を表示する ), ) ], ); } //以下の二つが今回制御したいstate bool _isFavorite = true;//いいねが押下されていればtrue int _favoriteCount = 1;//いいねの数 } |
このようにすれば、ボタンを押したときにUIが変化するようになります。
