MaterialApp
定義
CupertinoApp
Flutter 應用程式的根部Widget,他提供一整套 Google Material Design 設計規範的基礎架構和行為。可以把它想像成一個「Material Design 應用程式的預建框架和說明書」。
核心作用
- 定義應用程式整體外觀和行為:包含了應用程式的基礎主題、導航機制和許多開箱即用的功能。
- 整合 Material Design 元件:它是使用所有
Material
前綴的 Widget (如:Scaffold
,AppBar
,ElevatedButton
,Card
等) 的必要元件,確保這些子元件可以正確地顯示 Material Design 樣式和行為。
- 提供應用程式級別服務:內建陸行管理、主題數據傳遞等應用程式層級的服務。
常用屬性
title
(String):應用程式在多工管理器中顯示的標題。
home
(Widget):應用程式啟動時顯示的第一個頁面 Widget。通常是一個Scaffold。
theme
(ThemeData):應用程式德視覺主題,這裡可以定義整個應用程式的整體顏色、字體、文字樣式、按鈕樣式、卡片陰影等,這些設定將自動應用到應用程式中的所有 Material Widget。
routes
(Map<String, WidgetBuilder>):用於定義命行路由,允許你透過名稱導航到不同的頁面,不是直接傳遞 Widget 實例。
onGenerateRoute
(RouteFactory):一個用於動態生成的路由函式,當route
中找不到匹配的命名路由時會被呼叫。
navigatorKey
(GlobalKey<NavigatorState>):允許在沒有BuildContext
的情況下執行導航操作。
debugShowCheckedModeBanner
(bool):在開發模式下,是否在右上角顯示 DEBUG 橫幅,預設為true。
localizationsDelegates
和supportedLocales
: 用於處理應用程式的國際化和多語言支持。
CupertinoApp
定義
CupertinoApp
也是 Flutter 的根 Widget,但他是提供一套遵守 Apple iOS Human Interface Guidelines (HIG) 設計規範的基礎架構和行為。可以把它想像成一個「iOS 風格應用程式的預建框架和說明書」。
核心作用
- 定義應用程式的 iOS 風格外觀和行為: 它設定了應用程式的基礎 iOS 主題、iOS 風格的導航動畫和許多針對 iOS 設計的功能。
- 整合 Cupertino 元件: 它是使用所有
Cupertino
前綴的 Widget (如CupertinoNavigationBar
,CupertinoButton
,CupertinoSlider
等) 的必要上下文,確保這些元件能正確顯示並擁有 iOS 的樣式和行為。
- 提供應用程式級別服務 (iOS 特化): 與
MaterialApp
類似,也內建路由管理、主題數據傳遞、國際化支持等,但這些服務會更傾向於 iOS 的實現方式。
常用屬性
title
(String): 應用程式在 iOS 多工管理器(應用程式切換器)中顯示的標題。
home
(Widget): 應用程式啟動時顯示的第一個頁面 Widget。通常會是一個Scaffold
內部包裹著Cupertino
元件。
theme
(CupertinoThemeData): 應用程式的視覺主題。你可以設定應用程式的 iOS 主色調、文字顏色、字體等,這些設定會應用到應用程式中的所有 Cupertino Widget。
routes
(Map<String, WidgetBuilder>): 同樣用於定義命名路由,但導航動畫會是 iOS 風格。
onGenerateRoute
(RouteFactory): 同樣用於動態生成路由。
navigatorKey
(GlobalKey<NavigatorState>): 允許你在沒有BuildContext
的情況下執行導航操作。
debugShowCheckedModeBanner
(bool): 同樣控制開發模式下的「DEBUG」橫幅。
localizationsDelegates
和supportedLocales
: 用於處理應用程式的國際化和多語言支持。
比較表格
特性 | MaterialApp | CupertinoApp |
---|---|---|
風格 | Material Design 風格 | iOS Human Interface Guidelines 風格 |
設計哲學 | Google Material Design (物理隱喻、大膽、現在、跨平台) | Apple iOS Human Interface Guidelines (簡潔、流暢、半透明、原生 iOS) |
平台傾向 | Android (但通常用於跨平台) | iOS |
外觀風格 | 預設像 Android App,高度可客製化 | 預設像 原生 iOS App,較少客製化選項 |
主要 UI 元件 | Scaffold , AppBar , ElevatedButton , Card , SnackBar , TextField 等 | CupertinoNavigationBar , CupertinoButton , CupertinoSlider , CupertinoAlertDialog 等 |
頁面過渡 | 標準的 Material 過渡(例如從底部滑入,或淡入淡出) | iOS 風格的過渡(例如從右側滑入,支援邊緣滑動返回) |
主題系統 | ThemeData (全面且靈活) | CupertinoThemeData (較為簡潔) |
適用場景 | 創建跨平台且具統一 Material 設計的應用程式 | 創建專為 iOS 設計,追求原生 iOS 外觀和體驗的應用程式 |
偵錯橫幅 | 有 (debugShowCheckedModeBanner ) | 有 (debugShowCheckedModeBanner ) |
國際化支援 | 有 (localizationsDelegates , supportedLocales ) | 有 (localizationsDelegates , supportedLocales ) |
小結
兩者都是 WidgetApps
的具體實現,兩個核心區別在於遵循的設計系統。MaterialApp
專注於遵循 Google 的 Material Design,而 CupertinoApp
則專注於 Apple 的 iOS Human Interface Guidelines。
您可能有興趣的內容:
- 【 Flutter 學習筆記 】 MaterialApp vs CupertinoApp
- 【 n8n 管理工具 App 】掌上 n8n:隨時隨地掌控您的自動化工作流程!
- 【 Flutter 學習筆記 】 StatefulWidget vs StatelessWidget
- Node.js 專案容器化 (Docker)
- 本地端執行 Vercel 生成的 Web 應用程式
☕️ By My a Coffee ☕️
