🎃

【Flutter/Dart】Theme

2022/10/10に公開約2,100字

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

https://www.youtube.com/watch?v=oTvQDJOBXmM

お気づきでしょうか?

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

サンプル作ったヲ

まずはクリエイト

$ 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});

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

https://twitter.com/brickhubdev/status/1579460489221967874?s=20&t=Xy2m2b5ofZzBJZ7ICLoPig

https://blog.flutteruniv.com/flutter-mason/

Discussion

ログインするとコメントできます