Flutter 零基础入门（四十一）：Flutter 主题与自定义样式 —— App 美化必学

LarryLan

发布于 2026-03-03 15:50:15

180

Flutter 主题与自定义样式 —— App 美化必学

到目前为止，你已经掌握了：

动态页面与异步操作
多页面 App 框架（TabBar + BottomNavigationBar）
列表刷新与分页
用户操作反馈（SnackBar / AlertDialog）

但是一个 App 不仅要功能完整，还要美观一致。 Flutter 提供了 Theme / ThemeData 来统一管理样式。

一、Theme 基础

1️⃣ 全局主题

在 MaterialApp 中配置：

MaterialApp(
  title: 'Flutter 美化示例',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    brightness: Brightness.light,
    accentColor: Colors.orange,
    textTheme: TextTheme(
      bodyText1: TextStyle(fontSize: 16, color: Colors.black),
      bodyText2: TextStyle(fontSize: 14, color: Colors.grey[700]),
    ),
    elevatedButtonTheme: ElevatedButtonThemeData(
      style: ElevatedButton.styleFrom(
        primary: Colors.blue,
        onPrimary: Colors.white,
        textStyle: TextStyle(fontSize: 16),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
      ),
    ),
  ),
  home: HomePage(),
);

📌 说明：

primarySwatch → App 主色
brightness → 明暗主题
accentColor → 点缀颜色（部分组件使用）
textTheme → 全局文字样式
elevatedButtonTheme → 按钮统一样式

2️⃣ 局部主题覆盖

Theme(
  data: Theme.of(context).copyWith(
    primaryColor: Colors.red,
  ),
  child: AppBar(title: Text('局部主题')),
)

📌 ThemeData 可以在局部覆盖 → 灵活定制部分页面样式

二、常用组件自定义样式

1️⃣ AppBar

AppBar(
  title: Text('自定义 AppBar'),
  backgroundColor: Colors.deepPurple,
  centerTitle: true,
  elevation: 4,
)

2️⃣ ElevatedButton

ElevatedButton(
  onPressed: () {},
  child: Text('提交'),
  style: ElevatedButton.styleFrom(
    primary: Colors.green,
    onPrimary: Colors.white,
    textStyle: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
)

3️⃣ TextField

TextField(
  decoration: InputDecoration(
    labelText: '用户名',
    labelStyle: TextStyle(color: Colors.grey[600]),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 2),
    ),
  ),
)

三、统一颜色管理

创建一个 colors.dart 文件：

import 'package:flutter/material.dart';

class AppColors {
  static const primary = Color(0xFF2196F3);
  static const accent = Color(0xFFFF9800);
  static const background = Color(0xFFF5F5F5);
  static const textPrimary = Color(0xFF212121);
  static const textSecondary = Color(0xFF757575);
}

然后在 ThemeData 和组件中使用：

theme: ThemeData(
  primaryColor: AppColors.primary,
  accentColor: AppColors.accent,
)

📌 好处：

App 颜色统一
后续维护更方便
设计稿颜色易对齐

四、统一字体管理

在 pubspec.yaml 添加自定义字体：

fonts:
  - family: Roboto
    fonts:
      - asset: fonts/Roboto-Regular.ttf
      - asset: fonts/Roboto-Bold.ttf
        weight: 700

然后在 ThemeData 使用：

theme: ThemeData(
  fontFamily: 'Roboto',
)

📌 全局文字风格统一 → App 更专业

五、快速美化按钮与卡片

使用 ElevatedButtonThemeData 统一按钮样式
使用 Card + RoundedRectangleBorder + elevation 提升卡片质感

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(12),
  ),
  child: Padding(
    padding: EdgeInsets.all(16),
    child: Text('卡片内容'),
  ),
)