1
状态驱动的页面流：
2

3
  bootstrap.isReady == false
4
       │
5
       ↓
6
  BootstrapScreen ──→ bootstrap.isReady = true
7
                            │
8
                            ↓
9
                      ws.isAuthenticated == false
10
                            │
11
                            ↓
12
                      AuthScreen ──→ ws.isAuthenticated = true
13
                                          │
14
                                          ↓
15
                                    ChatScreen

1
// 弹出对话框并等待结果
2
final result = await showDialog<bool>(
3
  context: context,
4
  builder: (ctx) => AlertDialog(
5
    title: const Text('确认删除？'),
6
    actions: [
7
      TextButton(
8
        onPressed: () => Navigator.pop(ctx, false),   // ← 取消
9
        child: const Text('取消'),
10
      ),
11
      FilledButton(
12
        onPressed: () => Navigator.pop(ctx, true),    // ← 确认
13
        child: const Text('删除'),
14
      ),
15
    ],
16
  ),
17
);
18

19
if (result == true) {
20
  // 用户确认了
21
}

1
// 无动画过渡
2
Navigator.push(context, PageRouteBuilder(
3
  pageBuilder: (context, animation, secondaryAnimation) =>
4
      const McpSettingsScreen(),
5
  transitionsBuilder: (context, animation, secondaryAnimation, child) =>
6
      child,  // 无动画
7
));
8

9
// 淡入淡出
10
Navigator.push(context, PageRouteBuilder(
11
  pageBuilder: (context, animation, secondaryAnimation) =>
12
      const McpSettingsScreen(),
13
  transitionsBuilder: (context, animation, secondaryAnimation, child) =>
14
      FadeTransition(opacity: animation, child: child),
15
));

1
AppSettings.fontFamily ──────────────────────────────────────┐
2
     │ context.watch                                        │
3
     ↓                                                      ↓
4
MaterialApp                                                 │
5
  ├─ theme: AppTheme.light(fontFamily: ...)  ←── factory ──┐│
6
  ├─ darkTheme: AppTheme.dark(fontFamily: ...)  ←── factory │
7
  └─ themeMode: ThemeMode.system                            │
8
                                                            │
9
AppTheme.dark() / .light()                                  │
10
  ├─ brightness                                             │
11
  ├─ scaffoldBackgroundColor                                │
12
  ├─ colorScheme (primary / surface / onSurface)            │
13
  ├─ fontFamily ← ──────────────────────────────────────────┘
14
  └─ extensions: [LumiColors.dark() / .light()]
15
                       │
16
                       ↓
17
  Widget 中使用：
18
  Theme.of(context).colorScheme.primary     → 标准颜色
19
  Theme.of(context).extension<LumiColors>()! → 自定义颜色
20
    .sidebar / .bubbleMe / .accent / ...

1
class AppTheme {
2
  // 颜色常量
3
  static const _darkAccent = Color(0xFF5BACF0);
4
  static const _darkText = Color(0xFFEEF2F6);
5
  static const _darkBg = Color(0xFF17212B);
6

7
  static const _lightAccent = Color(0xFF2481CC);
8
  static const _lightText = Color(0xFF000000);
9
  static const _lightBg = Color(0xFFF0F2F5);
10

11
  // 深色主题工厂方法
12
  static ThemeData dark({String? fontFamily}) {
13
    return ThemeData(
14
      brightness: Brightness.dark,
15
      scaffoldBackgroundColor: _darkBg,
16
      colorScheme: const ColorScheme.dark(
17
        primary: _darkAccent,
18
        surface: _darkBg,
19
        onSurface: _darkText,
20
      ),
21
      fontFamily: fontFamily,
22
      extensions: [LumiColors.dark()],
23
    );
24
  }
25

26
  // 浅色主题工厂方法（结构对称）
27
  static ThemeData light({String? fontFamily}) {
28
    return ThemeData(
29
      brightness: Brightness.light,
30
      scaffoldBackgroundColor: _lightBg,
31
      colorScheme: const ColorScheme.light(
32
        primary: _lightAccent,
33
        surface: _lightBg,
34
        onSurface: _lightText,
35
      ),
36
      fontFamily: fontFamily,
37
      extensions: [LumiColors.light()],
38
    );
39
  }
40
}

1
// 第一层：Material 标准颜色（通过 colorScheme 访问）
2
Theme.of(context).colorScheme.primary     // 主色
3
Theme.of(context).colorScheme.surface     // 表面色
4
Theme.of(context).colorScheme.onSurface   // 表面文字色
5

6
// 第二层：Lumi-Hub 自定义颜色（通过 ThemeExtension 访问）
7
final colors = Theme.of(context).extension<LumiColors>()!;
8
colors.sidebar       // 侧边栏背景
9
colors.bubbleMe      // 我的消息气泡
10
colors.bubbleThem    // 对方的消息气泡
11
colors.accent        // 强调色
12
colors.subtext       // 次要文字
13
colors.inputBg       // 输入框背景
14
colors.divider       // 分隔线
15
colors.onBubbleMe    // 我的气泡上的文字
16
colors.onBubbleThem  // 对方气泡上的文字