【Flutter】FlexColorSchemeについて

FlexColorSchemeとは
使い方

FlexColorSchemeとは

FlexColorSchemeは、Flutterアプリケーションのために美しいMaterial Designテーマを作成するためのパッケージです。
標準的なThemeDataオブジェクトを返しますが、多くの追加機能が含まれています。ThemeData.from(ColorScheme)やThemeData(colorSchemeSeed)のようなFlutterのテーマ作成方法を基にしながら、より詳細なカスタマイズが可能です。

flex_color_scheme | Flutter package

A Flutter package to use and make beautiful Material design based themes.

使い方

FlexColorSchemeをプロジェクトで使用するには、まずpubspec.yamlファイルにパッケージを追加します。

dependencies:
  flex_color_scheme: ^7.3.1

サンプル

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: FlexThemeData.light(scheme: FlexScheme.mandyRed),
      darkTheme: FlexThemeData.dark(scheme: FlexScheme.mandyRed),
      themeMode: ThemeMode.system,
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

主なパラメータ

FlexThemeData.light

scheme: 使用するカラースキームを指定します。FlexScheme列挙型から選択します。

FlexThemeData.dark

scheme: 使用するカラースキームを指定します。FlexScheme列挙型から選択します。

ThemeMode.system

ThemeMode.system: デバイスの設定に基づいてテーマモードを切り替えます。ThemeMode.lightやThemeMode.darkも使用可能です。

その他の設定

コンポーネントのサブテーマ

コンポーネントサブテーマを使用することで、例えばすべてのUIウィジェットのボーダー半径を一つのプロパティ値で調整できます。

FlexThemeData.light(
  scheme: FlexScheme.mandyRed,
  subThemesData: const FlexSubThemesData(
    defaultRadius: 8.0,
  ),
),

高度なカラリング機能

FlexColorSchemeには、サーフェイスアルファブレンドのような高度なカラリング機能が含まれており、複数のキー色をシードとして使用するなどの設定が可能です。

FlexColorScheme(
  primary: Colors.blue,
  secondary: Colors.green,
  surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
  blendLevel: 20,
).toTheme,