背景
#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,所以既有頁面的主色 / 前景色邏輯完全不受影響
驗收條件
後續可能的 issue(不在此票)
- iOS 風 surface tint 關閉(上述「可選」章節獨立化)
CoursePaletteTheme.material/pastel/nord/vibrant 補 dark 變體
- Settings 頁面整合 palette picker(無需進 CourseScaffold 就能切課表配色)
背景
#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。低風險、局部收斂。要做的變更
CardTheme.shape圓角ElevatedButton/FilledButton圓角DividerTheme.thicknessScrollBehaviorBouncingScrollPhysicsSwitchThemeCupertinoSwitchAppBarTheme.scrolledUnderElevationBottomSheetTheme.shape頂圓角可選(看設計方向再決定)
壓掉 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 範圍:
CupertinoApp相容性
ApTheme.light()/ApTheme.dark()API 不變ColorScheme,所以既有頁面的主色 / 前景色邏輯完全不受影響驗收條件
ap_theme.dart:_buildTheme套用上表所列 7 項改動後續可能的 issue(不在此票)
CoursePaletteTheme.material/pastel/nord/vibrant補 dark 變體