Skip to content

feat(ui): ApTheme 元件造型向 iOS 靠攏 #187

Description

@abc873693

背景

#185 / PR #186 已經上線兩個基礎建設:

  • ApTheme.iOSThemeColors — 10 組 iOS System Colors 當作 App seed 色候選
  • CoursePaletteTheme.appleSystem(含 dark 變體)— 課表區塊可直接用 iOS 配色

這兩件事讓 App 的顏色層很接近 iOS 原生。但 ColorScheme.fromSeed 依 Material 3 HCT 演算法衍生出來的 surface / container 色仍是 Material 風味,視覺上「還是 Material App 只是換顏色」。

這張票處理元件造型層微調,讓整體視覺再往 iOS 靠一步。

目標

只動 ap_theme.dart_buildTheme,不影響其他檔案 API,也不改 ColorScheme。低風險、局部收斂。

要做的變更

# 元件 目前值 改為 備註
1 CardTheme.shape 圓角 16 10-12 iOS 卡片圓角偏小
2 ElevatedButton / FilledButton 圓角 12 10 iOS 按鈕通常較方
3 DividerTheme.thickness 1 0.5 iOS hair line 特徵
4 全域 ScrollBehavior Material 預設 BouncingScrollPhysics iOS 彈性滾動
5 SwitchTheme M3 大顆膠囊 更小、更接近 CupertinoSwitch 色系不變
6 AppBarTheme.scrolledUnderElevation 1 0 iOS 不加深色
7 BottomSheetTheme.shape 頂圓角 28 14-16 與 iOS modal 視覺一致

可選(看設計方向再決定)

壓掉 M3 surface tint(iOS 沒有這種染色)

```dart
// _buildTheme 尾段
cardTheme: cardTheme.copyWith(surfaceTintColor: Colors.transparent),
bottomSheetTheme: ...copyWith(surfaceTintColor: Colors.transparent),
navigationBarTheme: ...copyWith(surfaceTintColor: Colors.transparent),
// 或者:colorScheme.copyWith(surfaceTint: Colors.transparent)
```

優點:卡片/抽屜變純灰,iOS 感更強。
缺點:失去 M3 的層次動態,Material 原生感減弱。

預設不做,開成獨立的後續 issue 讓設計師決定。

不做(說明理由)

這些項目投報比差、不在此 ticket 範圍:

不做項目 原因
大標題 AppBar(large title) Flutter 原生沒對應;需要自寫 SliverAppBar + collapse 行為,工作量大
Grouped Inset List NKUST 現行 Card 樣式已固定,換掉要重設計多頁
整個改走 CupertinoApp 放棄 Material 生態(Drawer、SnackBar、AppBar action 等 Material-only)
自訂 Switch / Slider 動畫細節 投入大、辨識度提升有限

相容性

  • ApTheme.light() / ApTheme.dark() API 不變
  • 視覺變化是微調(圓角差 4-6px、divider 差 0.5px、bounce 動畫),不會破壞使用者認知
  • Android 原生行為保留(Material 預設),只是視覺上更柔和
  • 不動 ColorScheme,所以既有頁面的主色 / 前景色邏輯完全不受影響

驗收條件

  • ap_theme.dart:_buildTheme 套用上表所列 7 項改動
  • Android + iOS 手動驗證 AppBar / Card / Button / Dialog / Switch 視覺
  • Example app 完整跑過,確認沒有 layout overflow / 滾動行為異常
  • 截圖對比 before/after 貼回 PR(視覺 sanity check)

後續可能的 issue(不在此票)

  • iOS 風 surface tint 關閉(上述「可選」章節獨立化)
  • CoursePaletteTheme.material/pastel/nord/vibrant 補 dark 變體
  • Settings 頁面整合 palette picker(無需進 CourseScaffold 就能切課表配色)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions