Closed2024/03/29にクローズ4

Material Theme BuilderのExtended Color の使い方を調べる

調査日：2024/03/29
Version：2.0.1

`Extended colors` に2色追加

Color style にスタイル郡が追加される

エクスポートファイルにも同じ階層構造で追加される

追加した色をデザインでどう使うか

You may need to apply static colors in your app for brand expression or to communicate semantic meaning, like a green success state. By defining these colors using the Material system, they'll work with existing Material colors and support features like dynamic color and user-controlled contrast.

プロダクトのブランドカラーや、緑色の成功状態などの意味に使用できる
既存のマテリアルカラーと連動して、動的なカラーやユーザー制御のコントラストなどの機能がサポートされる

追加した色を実装でどう使うか

MaterialTheme.extendedColors を通じて利用する
背景色にはcolor,colorContainerを使用する
背景に重ねて表示するテキストにはonColor,onColorContainerを使用する

import 'package:theme.dart';

MaterialApp(
	theme: MaterialTheme(Theme.of(context).textTheme).light(),
	darkTheme: MaterialTheme(Theme.of(context).textTheme).dark(),
	home: Scaffold(
		appBar: AppBar(
 			title: const Text('Material Theme'),
 		),
  		body: Column(
			childlen: [
				Container(
       				color: Theme.of(context).colorScheme.primary,
       				width: 8,
       				height: 24,
          		),
				Container(
     				color: MaterialTheme(Theme.of(context).textTheme).extendedColors[0].value,
     				width: 8,
     				height: 24,
     			),
			]
		),
	),
)

このスクラップは2024/03/29にクローズされました