一、應用入口

1. 初始化 Flutter 底層綁定 ，運行 App。

import 'package:flutter/material.dart';
import 'package:flutter_base/Application.dart';void main() {// 確保綁定初始化WidgetsFlutterBinding.ensureInitialized();// App初始化Application.init();
}

2. 注冊 SDK /組件服務，配置命名路由。

import 'package:flutter/material.dart';
import 'package:flutter_base/LoginPage.dart';
import 'package:flutter_base/HomePage.dart';class Application {static void init() {registerService();runApp(const AppContainer());}static void registerService() {// 注冊SDK|組件服務}
}class AppContainer extends StatelessWidget {const AppContainer({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Application',initialRoute: '/LoginPage',routes: {'/LoginPage': (context) => const LoginPage(),'/HomePage': (context) => const HomePage()});}
}

二、頁面路由

1.?命名路由

命名路由（Named Routes）是一種使用預定義名稱來管理和訪問路由的機制。這種方法使代碼更易于理解和維護，特別是在具有多個頁面的復雜應用程序中。

2. 路由配置

MaterialApp 是 Flutter 框架中用于構建遵循 Material Design 規范的應用程序根組件。

• title：應用標題
• home：應用啟動時顯示的初始頁面
• initialRoute：指定初始路由名稱（若設置，則忽略?home屬性）
• routes：靜態路由表，預定義命名路由與頁面的映射關系
• onGenerateRoute：動態生成路由，處理未在?routes中定義的路徑
• ??onUnknownRoute：當所有路由規則均不匹配時的兜底處理（如顯示 404 頁面）

import 'package:flutter/material.dart';
import 'package:flutter_base/LoginPage.dart';
import 'package:flutter_base/HomePage.dart';
import 'package:flutter_base/ErrorPage.dart';class AppContainer extends StatelessWidget {const AppContainer({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Application',initialRoute: Navigator.defaultRouteName,routes: {'/': (context) => const LoginPage(name: 'Login'),'/HomePage': (context) => const HomePage(name: 'Home')},onGenerateRoute: (settings) {print('onGenerateRoute: settings-$settings');if (settings.name == '/LoginPage') {return MaterialPageRoute(builder: (context) => LoginPage(name: 'Login'));}},onUnknownRoute: (settings) {print('onUnknownRoute: settings-$settings');return MaterialPageRoute(builder: (context) => ErrorPage(name: 'Error'));});}
}

先查詢?routes 靜態路由表，未映射到自定義路由時，觸發 onGenerateRoute，當所有路由規則均不匹配時，觸發?onUnknownRoute。

3. 頁面傳參

3.1 跳轉頁面的參數傳遞

class LoginPageState extends State<LoginPage> {void push() {// pushNamed傳遞參數Navigator.pushNamed(context, '/HomePage', arguments: {'title': '首頁'});// 構造函數傳遞參數Navigator.push(context, MaterialPageRoute(builder: (context) => HomePage(arguments: {'title': '首頁'}));}  
}

3.2 命名路由的參數獲取

在命名路由的回調方法中獲取?settings 參數，通過 HomePage 的構造函數傳遞。

MaterialApp(...onGenerateRoute: (settings) {if (settings.name == '/HomePage') {Map<String, dynamic>?  _arguments;if (settings.arguments != null) {_arguments = settings.arguments as Map<String, dynamic>;}return MaterialPageRoute(builder: (context) => HomePage(arguments: _arguments));}}
);

3.3 目標頁面的參數獲取

目標頁面通過 ModalRoute.of(context) 獲取 settings 參數。

class HomePageState extends State<HomePage> {void getSettings() {final modalRoute = ModalRoute.of(context);if (modalRoute != null) {final settings = modalRoute.settings;print('settings: name-${settings.name}, arguments-${settings.arguments}');}}
}

三、組件定制

1. 無狀態組件

無狀態組件（StatelessWidget）的所有屬性均通過?final?聲明，創建后無法修改。任何 UI 變化都需重建新的 Widget 實例。

import 'package:flutter/material.dart';class CustomText extends StatelessWidget {final String content; // 不可變屬性const CustomText({required this.content});@overrideWidget build(BuildContext context) {return Text(content); // UI 僅依賴初始配置}
}

2. 有狀態組件

有狀態組件（StatefulWidget）通過分離不可變的 Widget 配置與可變的 State 對象，實現高效的狀態管理和 UI 更新機制。

import 'package:flutter/material.dart';class HomePage extends StatefulWidget {final Map<String, dynamic>? arguments;const HomePage({super.key, this.arguments});@overrideState<HomePage> createState() => HomePageState(); // 創建關聯的State
}class HomePageState extends State<HomePage> {int _counter = 0;void _incrementCounter() {setState(() { // 狀態更新方法_counter++;});print('arguments: ${widget.arguments}');}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('Home')),body: Center(child: ElevatedButton(child: Text('Click Increment: $_counter'),onPressed: _incrementCounter,),),);}
}