web-dev-qa-db-ja.com

Flutterのマテリアルデザインカラーのマップはありますか？

基本的なマテリアルカラーを取得して、その色のシェードをテーマにしたウィジェットを出力することが理想的なウィジェットがあります。例えば：

return new Container(
  color: Colors.pink.shade50,
  child: new Text(
    'hello',
    style: new TextStyle(
      color: Colors.pink.shade100,
    ),
  ),
);

ピンクの両方の色合いを指定する必要があります。理想的には、次のようなことができます：

Color color = getBaseColorForThisPage(); // returns something like Colors.pink, but on another page, it'll return something like Colors.purple
return new Container(
  color: color.shade50,
  child: new Text(
    'hello',
    style: new TextStyle(
      color: color.shade100,
    ),
  ),
);

単一の色ではなく、カラーパレット内のマテリアルカラーの「マップ」を返す方法はありますか？ IntelliJのオートコンプリートを見ると、Colors.pink、私は日陰を指定することができます。しかし、変数に色を設定すると、 Color color = Colors.pink、後でできないcolor.shade100またはcolor[100]。ありがとう！

colorsmaterial-designflutter
10
Mary

MaterialColorは ColorSwatch を拡張します。これはMapの色のようなものです。 ColorSwatchを使用して500シェードを取得できる場所であればどこでもColorを使用できますが、[]を使用してインデックスを作成することもできます。

すべてのプライマリマテリアルカラー見本のListを取得するには、 Colors.primaries を使用します。

5
Collin Jackson

Flutterに関するDartのドキュメントを見ると here

materialColorオブジェクトのいくつかがどのように作成されるかに気付くでしょう。

明らかにFlutterはMaterialDesignについて非常に優れた概念を持ち、説明されているほとんどの色 here はメインのflutterパッケージ "package：flutter/material.Dart"内で既に事前定義されています。これはすべて、すぐに使用できるようになりますが、

誰かが特定の色合いで独自のMaterialColorを作成したい場合は、次のようなことができます。

MaterialColor myGreen = const MaterialColor(0xFFAAD400,
  const {
    50 : const Color(hex_value1),
    100 : const Color(hex_value2),
    200 : const Color(hex_value3),
    300 : const Color(hex_value4),
    400 : const Color(hex_value5),
    500 : const Color(hex_value6),
    600 : const Color(hex_value7),
    700 : const Color(hex_value8),
    800 : const Color(hex_value9),
    900 : const Color(hex_value10)});

MaterialColorオブジェクトコンストラクターの最初のパラメーターは、色のデフォルトのHEX値です。この場合は0xFFAAD400です。 2番目のパラメーターは、すべての色の見本を含むマップです。 「hex_value1」....「hex_value10」に関するすべての値は、異なる色である必要があります。これらのスウォッチを選択（作成）する方法を理解するには、たとえば here を見てください。

色の16進数値の読み方がわからない人のために、ここにいくつかの追加情報を投稿します。

たとえば、完全に不透明なオレンジ（0xFFFF9000）を取得するには、const Color（0xFFFF9000）を使用できます。ここで、

  • 最初の2文字（FF）は約アルファ（透明度）です。

  • 2番目の2文字（FF）は赤用です。

  • 3番目の2文字（90）は緑、

  • 青の最後の2（00）。

ありがとう、それが誰かに役立つことを願っています

11
Sniper

このようにマテリアルの色を作成できます：

const MaterialColor primaryColorShades = MaterialColor(
  0xFF181861,
  <int, Color>{
    50: Color(0xFFA4A4BF),
    100: Color(0xFFA4A4BF),
    200: Color(0xFFA4A4BF),
    300: Color(0xFF9191B3),
    400: Color(0xFF7F7FA6),
    500: Color(0xFF181861),
    600: Color(0xFF6D6D99),
    700: Color(0xFF5B5B8D),
    800: Color(0xFF494980),
    900: Color(0xFF181861),
  },
);
2
Andrés Sanabria

独自のマテリアルカラーを作成するのではなく、簡単です。また、単純なWebサイトを使用して、フラッターの色を選択しています。 フラッタードクターカラーピッカー

0
EyoelD

マップを使用する必要があります。

特定の色調で独自のMaterialColorを作成する場合、RGBO（赤、緑、青、不透明度）形式で色の独自のマップを作成することにより、次のようなことができます。

Map<int, Color> colorMap = {
  50: Color.fromRGBO(147, 205, 72, .1),
  100: Color.fromRGBO(147, 205, 72, .2),
  200: Color.fromRGBO(147, 205, 72, .3),
  300: Color.fromRGBO(147, 205, 72, .4),
  400: Color.fromRGBO(147, 205, 72, .5),
  500: Color.fromRGBO(147, 205, 72, .6),
  600: Color.fromRGBO(147, 205, 72, .7),
  700: Color.fromRGBO(147, 205, 72, .8),
  800: Color.fromRGBO(147, 205, 72, .9),
  900: Color.fromRGBO(147, 205, 72, 1),
};
// Green color code: 93cd48 and first two characters (FF) are alpha values (transparency)
MaterialColor customColor = MaterialColor(0xFF93cd48, colorMap);

93cd48のようなカラーコード値がある場合、それをRGB値に変換するには https://www.rapidtables.com/convert/ color/hex-to-rgb.html

詳細については、 https://medium.com/@jits619/flutter-material-color-conversion-ad1574f25828

https://www.youtube.com/watch?v=U19hRU9e0yw&list=PLQ7fSTYH_bV06SWG1IPnyFbavN5NB_h2o&index=7&t=345s

0
jitsm555