主题与样式组件

主题与样式组件用于定义应用的整体外观和感觉。

提示：使用主题可以轻松实现应用的全局样式管理。
📱 渲染效果预览
Primary
Accent
Surface
Divider
Error
📱 渲染效果预览
☀️
Light
🌙
Dark

ThemeData

ThemeData 定义了应用的主题配置。

MaterialApp(
  theme: ThemeData(
    primarySwatch: Colors.blue,
    accentColor: Colors.amber,
    brightness: Brightness.light,
    fontFamily: 'Roboto',
  ),
  home: MyHomePage(),
)
📱 渲染效果预览
Primary
Secondary
Error
Success
Warning

ThemeMode

ThemeMode 用于控制主题模式（亮色/暗色）。

MaterialApp(
  theme: ThemeData.light(),
  darkTheme: ThemeData.dark(),
  themeMode: ThemeMode.system, // 跟随系统
  // themeMode: ThemeMode.light,  // 始终亮色
  // themeMode: ThemeMode.dark,   // 始终暗色
  home: MyHomePage(),
)
📱 渲染效果预览
Display Large
Body Large - 段落文本
Body Medium - 辅助文本

ColorScheme

ColorScheme 提供了一组协调的颜色。

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),
  ),
  home: MyHomePage(),
)
📱 渲染效果预览
⭐
❤️
🔔
📱
📧

TextTheme

TextTheme 定义了文本的样式。

ThemeData(
  textTheme: TextTheme(
    displayLarge: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
    bodyLarge: TextStyle(fontSize: 16, color: Colors.black),
    bodyMedium: TextStyle(fontSize: 14, color: Colors.grey),
  ),
)
📱 渲染效果预览
卡片标题
这是卡片的实际内容区域。卡片具有圆角边框和阴影效果。

IconThemeData

IconThemeData 定义了图标的样式。

ThemeData(
  iconTheme: IconThemeData(
    color: Colors.blue,
    size: 24,
  ),
)
📱 渲染效果预览
卡片标题
这是卡片的实际内容区域。卡片具有圆角边框和阴影效果。

CardTheme

CardTheme 定义了卡片的样式。

ThemeData(
  cardTheme: CardTheme(
    elevation: 4,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
    color: Colors.white,
  ),
)
完整主题示例： 
MaterialApp(
  theme: ThemeData(
    useMaterial3: true,
    colorScheme: ColorScheme.fromSeed(
      seedColor: Colors.blue,
      brightness: Brightness.light,
    ),
    textTheme: TextTheme(
      bodyLarge: TextStyle(fontSize: 16),
      bodyMedium: TextStyle(fontSize: 14),
    ),
    cardTheme: CardTheme(
      elevation: 2,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(12),
      ),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
  ),
  home: MyHomePage(),
)
← 网络与数据组件 安全与权限组件 →