🎃

【Flutter/Dart】Theme

2022/10/11に公開

Flutter

Dart

study

tech

まずは動画をご覧ください

お気づきでしょうか？

そうです。もうすぐでハロウィンなのでこの話題に触れました。
というか、今まで触れていなかったことが不思議なくらい基本的な項目でした。

サンプル作ったヲ

まずはクリエイト

$ flutter create theme_widget

とりあえず、ブロック(Cubit)を作成

theme_cubit.dart

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class ThemeCubit extends Cubit<ThemeData> {
  ThemeCubit() : super(_themeDatas[AppTheme.light]!);

  void changeTheme(AppTheme theme) {
    emit(_themeDatas[theme]!);
  }
}

// テーマを増やせるようにEnumで定義
enum AppTheme {
  light,
  dark,
}

// EnumからThemeを呼び出す配列を作成
// 今回の記事のメインテーマはこの中のThemeData部分である。
final _themeDatas = {
  AppTheme.dark: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.white,
  ),
  AppTheme.light: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.black38,
  ),
};

最後にmain.dartをいじります。

main.dart

/// 省略

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MultiBlocProvider(
      providers: [
        BlocProvider<ThemeCubit>.value(
          value: ThemeCubit(),
        ),
      ],
      child: BlocBuilder<ThemeCubit, ThemeData>(
        builder: (context, state) {
          return MaterialApp(
            title: 'Flutter Demo',
            theme: state,
            home: const MyHomePage(title: 'Flutter Demo Home Page'),
          );
        },
      ),
    );
  }
}

/// 省略

後はボタンでも作って以下を呼び出す

// この辺はいい感じに作ってみてください。
// 端末のテーマ読み取ったり、ローカルデータ読み取ったりetc...
context
    .read<ThemeCubit>()
    .changeTheme(_themeFlag ? AppTheme.dark : AppTheme.light);
setState(() {
  _themeFlag = !_themeFlag;
});

最後に

ブロックのState部分をAppThemeにしてどうにかいい感じにできないかとも考えたが、StreamでAppThemeをリッスンしてそれをThemeDataにやればいけるかなって思ったり、思わなかったりしたが。
今回はこれでやとうろ思う。
後は設定画面とかに現在のTheme値をshare_preferentとかに持たせてやればいいんでないか。

brickhubのドキュメントサイトがあるらしいので、そのドキュメントと日本語でわかりやすく使い方をまとめられているサイトを貼りつけておこう。