1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

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

Posted at

はじめに

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

やりたいことは以下

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

  • ダークモード切り替え用のスイッチ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のリポジトリにあげています。
誰かの参考になれば嬉しいです。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?