🎨

活性/非活性なアイコン(Icon)とボタン(Container)をriverpodで状態を監視して作る

2023/03/26に公開

Flutter

概要

riverpodで状態管理して、状態に応じたアイコンとボタンを作成します。
以下、作成イメージです。

※作成したリポジトリ

前提条件

・Flutter(dart)の基本的な書き方が分かる
・riverpodの基本的な書き方が分かる

バージョン

開発時のバージョンです
・Flutter 3.3.8
・flutter_riverpod: ^2.3.1

この記事で伝えたいこと

riverpodで監視している状態に応じたアイコン・ボタンが作成できる

実装

完成コード

要所の解説をします

1.アイコン・ボタンのプロバイダ作成

アイコン・ボタンそれぞれのプロバイダを作成します。
初期値は非活性である「false」を保持します。
それぞれ「iconStateProvider」、「buttonStateProvider」と命名します。

2.状態の監視

ConsumerWidgetでプロバイダを使用できるようにして、「iconStateProvider」と「buttonStateProvider」をwatchします。変数名は「favoriteIconState」と「buttonState」です。

3.状態に応じたUIの宣言

「iconStateProvider」と「buttonStateProvider」の状態に応じたUIを宣言します。
アイコンを「favoriteIcon」ボタンを「button」とし、「favoriteIconState」と「buttonState」の状態に応じて「favoriteIcon」と「button」を変更します。
favoriteIconStateがtrueであればfavoriteIconのカラーがピンク、buttonStateがtrueであれば「活性」という文字のボタンになっていると思います。

4.UIの構築

「favoriteIcon」と「button」を構築したい箇所に記述します。

5.状態の更新

アイコン・ボタンがそれぞれ押下された時の状態の更新をInkWellのonTapで記述します。

まとめ

以上が活性/非活性なアイコンとボタンをriverpodで状態を監視して作る方法です。
InkWellを使うことでデザインの自由度がかなり上げられ、さまざまなデザインのアイコン・ボタンを作ることができると思います。

間違っている点や質問があれば、是非コメントいただきたいです！

概要