【Flutter】何かのトリガーでWidgetの色を変更する

6712 ワード
Riverpod Flutter Flutter テキストリンク

はじめに

初投稿です。
Flutterで個人開発をしています。
タイトルでは何かのトリガーとしましたが、今回やりたかったことはダークモード切替タイミング時です。
その方法を記事に残します。

やりたいことは以下


例によって、チュートリアルのカウントアップアプリを題材とします。

  • ダークモード切り替え用のスイッチWidegetを追加
  • スイッチの切り替えでダークモードをON/OFFする
  • ダークモード切り替えをトリガーとし、スイッチWidgetとFloatingActionButtonの色を切り替える

端末設定に依存せず、アプリ内で通常・ダークモードで使い分ける想定です。

main.dart
// ダークモード判定用プロバイダー
final isDarkModeProvider = StateProvider((ref) => false);

※今回の内容の本質と関係ないので詳しい説明は省略しますが、状態管理はRiverPodを使用しています。

main.dart
class MyApp extends ConsumerWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // ダークモード切替を監視
    final _isDarkMode = ref.watch(isDarkModeProvider);

    return MaterialApp(
      title: 'Flutter Demo',
　　　　　　　　　　　　// テーマをダークモード時かどうかで切り替える
      theme: _isDarkMode
          ? ThemeData.dark()
          : ThemeData(primarySwatch: Colors.blue),
      home: const MyHomePage(title: 'Flutter DarkMode Demo'),
    );
  }
}

ダークモード判定用のプロバイダーを監視し、三項演算子でThemeDataを切替えを行っています。

main.dart
// スイッチWidget
Switch(
  value: _isDarkMode,
  // ダークモード切替用プロバイダーの切り替えタイミングで、
  // 三項演算子でダークモード時にピンク、通常時にブルーを設定する
  activeColor: _isDarkMode ? Colors.pink : Colors.blue,
  onChanged: (value) {
    _isDarkModeNotifier.update((state) => !state);
  },
)

スイッチWidgetのonChangeイベント発火時に、三項演算子で色の切り替えをしています。

main.dart
// Floating Action Button
floatingActionButton: FloatingActionButton(
  onPressed: () {
    _counterNotifier.update((state) => state + 1);
  },
  tooltip: 'Increment',
  child: const Icon(Icons.add),
  // ダークモード切替用プロバイダーの切り替えタイミングで、
  // 三項演算子でダークモード時にピンク、通常時にブルーを設定する
  backgroundColor: _isDarkMode ? Colors.pink : Colors.blue,
),

スイッチWidgetのonChangeイベント発火でダークモードフラグONとなり、こちらも同様に三項演算子で色が切り替わるようにしています。

終わりに

ソースの全文はGitHubのリポジトリにあげています。
誰かの参考になれば嬉しいです。