Flutter/Dartを使ってスマホアプリを作っています。（こんな感じのです→JAGrid）アプリの配色を簡単に設定できるColorSchemeについてまとめます。
FlutterのColorSchemeは、アプリ全体のカラーテーマを定義するための構造で、マテリアルデザインのガイドラインに従っています。ColorSchemeは、主にアプリの見た目や雰囲気を統一し、一貫したデザインを保つために使用されます。以下にColorSchemeの詳細を説明します。
ColorScheme
ColorSchemeの概要
ColorSchemeは、アプリの様々な部分に適用される色のセットを提供します。これにより、ボタン、背景、テキストなどの色を一貫して管理できます。ColorSchemeは通常、ThemeDataと組み合わせて使用されます。
ColorSchemeのプロパティ
ColorSchemeには、以下のような多くのプロパティがあります。これらはアプリのさまざまなUI要素に関連しています。
- primary: 主にアプリの主要な部分やアクセントカラーに使用される色。
- primaryVariant: primary色のバリエーション。ダークモードや他のコンテキストで使用されることが多い。
- secondary: primaryとは別に、強調表示やアクセントに使用される色。
- secondaryVariant: secondary色のバリエーション。
- background: アプリの背景色。
- surface: カードやシートなど、アプリの表面色。
- error: エラーの表示に使用される色。
- onPrimary: primary色上でのテキストやアイコンの色。
- onSecondary: secondary色上でのテキストやアイコンの色。
- onBackground: background色上でのテキストやアイコンの色。
- onSurface: surface色上でのテキストやアイコンの色。
- onError: error色上でのテキストやアイコンの色。
ColorSchemeの利用方法
ColorSchemeはThemeDataと一緒に使用され、アプリ全体のテーマを設定します。以下に簡単な例を示します。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.fromSwatch(
primarySwatch: Colors.blue,
accentColor: Colors.orange,
).copyWith(
secondary: Colors.green,
),
),
home: Scaffold(
appBar: AppBar(
title: Text('ColorScheme Example'),
),
body: Center(
child: Text('Hello, world!'),
),
),
);
}
}
この例では、ThemeDataのcolorSchemeプロパティを設定して、アプリ全体のカラーセットを定義しています。ColorScheme.fromSwatchを使用して、基本的なカラーパレットを生成し、必要に応じて色を上書きしています。
ColorSchemeのカスタマイズ
ColorSchemeをカスタマイズするには、copyWithメソッドを使用して特定のプロパティを変更できます。例えば、次のようにしてsecondary色を変更できます。
ColorScheme customColorScheme = ThemeData.light().colorScheme.copyWith(
secondary: Colors.purple,
);
ColorSchemeの適用例
実際にColorSchemeを使って、ボタンやテキストなどに色を適用する例を示します。
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
colorScheme: ColorScheme.light(
primary: Colors.blue,
secondary: Colors.green,
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.blue,
),
),
),
home: Scaffold(
appBar: AppBar(
title: Text('ColorScheme Example'),
),
body: Center(
child: TextButton(
onPressed: () {},
child: Text('Press me'),
),
),
),
);
}
}
このように、ColorSchemeを利用して、アプリ全体の一貫性を持ったカラーテーマを簡単に設定できます。ColorSchemeを適切に活用することで、視覚的に魅力的で一貫性のあるユーザー体験を提供することができます。
参考
最後まで読んでいただき有難うございました。73
コメント