颜色与字体

Flutter 颜色体系

Color 类

// 常用创建方式
Color(0xFF2196F3)           // ARGB 十六进制（FF = 不透明）
Color.fromARGB(255, 33, 150, 243)  // ARGB 整数
Color.fromRGBO(33, 150, 243, 1.0)  // RGB + 不透明度
Colors.blue                       // Material 预设颜色
Colors.blue[200]                  // 色阶（100~900）

不透明度

Colors.blue.withOpacity(0.5)   // 50% 不透明度
Color(0x802196F3)               // ARGB 中 80 = 50% 不透明度

Material 预设颜色

Flutter 提供了完整的 Material 色板，每种颜色有 10 个色阶：

Colors.red
Colors.pink
Colors.purple
Colors.deepPurple
Colors.indigo
Colors.blue
Colors.lightBlue
Colors.cyan
Colors.teal
Colors.green
Colors.lightGreen
Colors.lime
Colors.yellow
Colors.amber
Colors.orange
Colors.deepOrange
Colors.brown
Colors.grey
Colors.blueGrey

每个色阶从 50（最浅）到 900（最深），还有 shade50 到 shade900：

Colors.blue[50]   // 最浅
Colors.blue[100]
Colors.blue[200]
...
Colors.blue[900]  // 最深

广色域（Wide Gamut）

Flutter 3.27+ 支持广色域颜色，Color 类新增了更丰富的颜色表示：

// 广色域颜色（Flutter 3.27+）
const Color(0xFF00FF00)  // 标准色域

---

自定义字体

1. 准备字体文件

将字体文件（.ttf / .otf）放入项目目录：

assets/fonts/
├── NotoSansSC-Regular.ttf
├── NotoSansSC-Bold.ttf
└── NotoSansSC-Light.ttf

2. 在 pubspec.yaml 中声明

flutter:
  fonts:
    - family: NotoSansSC
      fonts:
        - asset: assets/fonts/NotoSansSC-Regular.ttf
        - asset: assets/fonts/NotoSansSC-Bold.ttf
          weight: 700
        - asset: assets/fonts/NotoSansSC-Light.ttf
          weight: 300

3. 使用字体

// 全局使用
MaterialApp(
  theme: ThemeData(fontFamily: 'NotoSansSC'),
)

// 局部使用
Text(
  '自定义字体',
  style: TextStyle(fontFamily: 'NotoSansSC', fontWeight: FontWeight.bold),
)

字重映射

TextStyle 字重	对应 weight 值
FontWeight.w100	100 (Thin)
FontWeight.w200	200 (ExtraLight)
FontWeight.w300	300 (Light)
FontWeight.w400	400 (Normal/Regular)
FontWeight.w500	500 (Medium)
FontWeight.w600	600 (SemiBold)
FontWeight.w700	700 (Bold)
FontWeight.w800	800 (ExtraBold)
FontWeight.w900	900 (Black)

---

文字样式（TextStyle）

TextStyle(
  fontSize: 16,
  fontWeight: FontWeight.w500,
  fontStyle: FontStyle.normal,
  letterSpacing: 0.5,
  wordSpacing: 1.0,
  height: 1.5,                // 行高倍数
  color: Colors.black87,
  backgroundColor: Colors.yellow[100],
  decoration: TextDecoration.underline,
  decorationColor: Colors.red,
  decorationStyle: TextDecorationStyle.dashed,
  overflow: TextOverflow.ellipsis,
)

使用主题文字样式

// 获取主题文字样式并修改
Text(
  '标题',
  style: Theme.of(context).textTheme.titleLarge?.copyWith(
    color: Colors.blue,
    fontSize: 24,
  ),
)

下一步

• 尺寸与适配 — MediaQuery / SafeArea