是否有Flutter材質設計顏色的地圖？

我有一個小部件，我最好喜歡採用基礎材質顏色並輸出以該顏色爲主題的小部件。例如：是否有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]。謝謝！

來源

2017-10-05 Mary

MaterialColor延伸ColorSwatch這是有點像顏色Map。您可以在任何可以使用Color的地方使用ColorSwatch並獲得500色，但您也可以用[]索引。

要獲得所有主要材料色樣的List，請使用Colors.primaries。

來源

2017-10-05 22:24:10

我一定要定義映射自己的ColorSwatch，或者是有什麼辦法可以參考MaterialColor地圖？到目前爲止，這是我的代碼片段（道歉格式化），我必須手動定義顏色的每個陰影： 'var map = new Map （）; 012.map.putIfAbsent（50，（）=> Colors.pink [50]）; map.putIfAbsent（100，（）=> Colors.pink [100]）; var colorswatch = new ColorSwatch（500，map）; //更新後的設置顏色： //顏色：colorswatch [50]' 我嘗試使用Colors.primaries中的顏色，但它們返回的是MaterialColor而不是Map。 – Mary

我不確定你爲什麼在這裏使用'Map'。你可以說'ColorSwatch color = Colors.pink;'，稍後你可以說'color [50]'。如果您知道所有色板都是「MaterialColor」，只需使用「MaterialColor」作爲「color」的類型。 –

啊，我以爲我不得不實例化一個新的ColorSwatch對象（它需要一個Map）！我沒有意識到我可以將ColorSwatch對象設置爲現有的MaterialColor。謝謝。 – Mary

如果你看看達特文檔中關於撲here

你會發現如何一些MaterialColor對象被創建。

顯然Flutter對MaterialDesign有着非常好的概念，並且大多數顏色描述here已經在主要撲翼包「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。第二個參數是包含所有顏色樣本的地圖。所有關於「hex_value1」....「hex_value10」的值都需要不同的顏色。爲了得到一些想法如何選擇（創建）這些樣本，例如看看here

對於那些誰不知道如何讀的顏色的十六進制值，在這裏我將發佈一些額外的信息：

例如，要得到完全不透明的橙色（0xFFFF9000），你可以使用 const的顏色（0xFFFF9000），其中：

前兩個字符（FF）是對alpha（透明度），
秒兩個字符（FF）是用於紅色，
第三兩個字符（90）是用於綠色，
和最後兩個（00）爲藍色。

感謝，希望這將有助於給別人

來源

2017-12-10 15:43:32 Sniper

是否有Flutter材質設計顏色的地圖？

回答

相關問題