[筆記] Flutter開發：顏色篇

/ Flutter, UIUX

使用Material Design 基本顏色

  1. Colors.red
  2. Colors.pink
  3. Colors.purple
  4. Colors.deepPurple
  5. Colors.indigo
  6. Colors.blue
  7. Colors.lightBlue
  8. Colors.cyan
  9. Colors.teal
  10. Colors.green
  11. Colors.lightGreen
  12. Colors.lime
  13. Colors.yellow
  14. Colors.amber
  15. Colors.orange
  16. Colors.deepOrange
  17. Colors.brown
  18. Colors.grey
  19. Colors.blueGrey

調整色階

每種顏色都可以通過指定色階來調整亮度，例如 Colors.blue[300] 是淺藍色，而 Colors.blue[900] 是深藍色。

使用 Material Color 的擴展色階

Color blueAccent = Colors.blueAccent;
Color greenAccent = Colors.greenAccent;
Color pinkAccent = Colors.pinkAccent;
Color orangeAccent = Colors.orangeAccent;

自訂義顏色

常見表示方式：

  1. RGB = 紅、綠、藍
  2. Hex = 十六進位 = 色碼
  3. HSL = 色相、飽和度、亮度

Flutter中的定義方式

  • ARGB ⇒ A=透明程度(0-255)
    • a：透明度（0 完全透明，255 完全不透明）
    • r、g、b：紅、綠、藍分量（0-255）
  • RGBO ⇒ O=透明度(0-1)
    • r、g、b：紅、綠、藍分量（0-255）
    • opacity：透明度（0.0 – 1.0）
  • 色碼定義 = 透明＆色碼

程式碼寫法

 // 橙色 #FFA500
Color(0xFFFFA500);
Color.fromRGBO(255, 165, 0, 1)
Color.fromARGB(255, 255, 165, 0);

Material色階卡