Closed4
Material Theme BuilderのExtended Color の使い方を調べる
hott3調査日：2024/03/29
Version：2.0.1
hott3
Extended colors に2色追加
Color style にスタイル郡が追加される
エクスポートファイルにも同じ階層構造で追加される
hott3追加した色をデザインでどう使うか
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.
- プロダクトのブランドカラーや、緑色の成功状態などの意味に使用できる
- 既存のマテリアル カラーと連動して、動的なカラーやユーザー制御のコントラストなどの機能がサポートされる
hott3追加した色を実装でどう使うか
-
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,
),
]
),
),
)
このスクラップは1ヶ月前にクローズされました