本文基于我学习 Timecop 源码后复刻的 Flutter 项目。
适用环境：Windows + Android Studio 2025 + Flutter 3.35.7 + JDK 17 + Android SDK 36。

---

一、项目概览

主要包含三个核心模块：

模块	文件	说明
🎨 UI组件	project_colour.dart	渲染项目颜色圆点
🌈 主题系统	theme_util.dart	定义全局主题、配色方案
🧩 数据模型	project.dart	定义项目实体类与值等性判断

---

二、项目颜色组件（ProjectColour）

功能：
根据传入的 Project 实例显示一个圆形色块。

• 如果有颜色 → 实心圆点

• 如果无颜色 → 空心灰圈

• 支持 mini 模式缩小显示

class ProjectColour extends StatelessWidget {
  static const double _size = 20;
  final Project? project;
  final bool? mini;

  const ProjectColour({Key? key, this.project, this.mini}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    bool m = mini ?? false;
    double scale = m ? 14 / 20 : 1.0;

    return Container(
      width: _size * scale,
      height: _size * scale,
      decoration: BoxDecoration(
        color: project?.colour ?? Colors.transparent,
        border: project == null
            ? Border.all(
                color: ThemeUtil.getOnBackgroundLighter(context),
                width: m ? 2.5 : 3.0,
              )
            : null,
        shape: BoxShape.circle,
      ),
    );
  }
}

📘 知识点总结：

• StatelessWidget：静态展示型组件；

• BoxDecoration(shape: BoxShape.circle)：绘制圆形；

• ThemeUtil.getOnBackgroundLighter()：主题色适配；

• ?? 运算符：提供空值回退。

---

三、主题系统（ThemeUtil）

功能：
集中定义亮色、暗色、纯黑三种主题方案。
控制页面切换动画、字体、颜色方案、AppBar 样式、控件颜色等。

static final lightColors = ColorScheme.light(
  primary: Colors.cyan.shade600,
  onPrimary: Colors.white,
  surface: Colors.grey.shade50,
  onSurface: Colors.black87,
);

static ThemeData getThemeFromColors({
  required Brightness brightness,
  required ColorScheme colors,
  required Color appBarBackground,
  required Color appBarForeground,
  double appBarElevation = 0,
}) => ThemeData(
  brightness: brightness,
  colorScheme: colors,
  fontFamily: _fontFamily,
  pageTransitionsTheme: _pageTransitionsTheme,
  appBarTheme: AppBarTheme(
    centerTitle: !Platform.isAndroid,
    backgroundColor: appBarBackground,
    foregroundColor: appBarForeground,
  ),
  floatingActionButtonTheme: FloatingActionButtonThemeData(
    backgroundColor: colors.primary,
    foregroundColor: colors.onPrimary,
  ),
);

📘 知识点总结：

• ThemeData 控制应用整体外观；

• ColorScheme 管理语义化颜色；

• AppBarTheme / FloatingActionButtonTheme 统一样式；

• Platform.isAndroid 实现跨平台差异化。

---

四、项目数据模型（Project）

功能：
表示一个项目的数据对象，支持值等性比较（Equatable），
可通过 clone() 快速复制并修改部分属性。

import 'dart:ui';
import 'package:equatable/equatable.dart';

class Project extends Equatable {
  final int id;
  final String name;
  final Color colour;
  final bool archived;

  const Project({
    required this.id,
    required this.name,
    required this.colour,
    required this.archived,
  });

  @override
  List<Object?> get props => [id, name, colour, archived];
  @override
  bool get stringify => true;

  Project.clone(Project project, {String? name, Color? colour, bool? archived})
      : this(
          id: project.id,
          name: name ?? project.name,
          colour: colour ?? project.colour,
          archived: archived ?? project.archived,
        );
}

📘 知识点总结：

• Equatable：自动实现值相等比较；

• List<Object?> get props：定义哪些属性参与比较；

• clone()：克隆并可选修改字段；

• 引入 dart:ui 而非 material.dart，避免模型层依赖 UI。

---

五、核心知识导图

Project (数据层)
   ↓
ThemeUtil (主题层)
   ↓
ProjectColour (UI层)

🧠 数据层与 UI 层完全解耦：
Project 仅描述数据，ProjectColour 负责展示，ThemeUtil 管理样式。

---

六、总结

模块	作用	关键技术
Project	定义项目实体	Equatable / Clone / dart:ui
ThemeUtil	全局主题与样式	ThemeData / ColorScheme / Platform
ProjectColour	UI 展示组件	StatelessWidget / BoxDecoration / ThemeUtil