一、应用入口

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,),),);}
}