MaterialApp — 什么是 MaterialApp，根小部件的配置与作用

Flutter 中的 MaterialApp 是什么？

MaterialApp — 是一个包装小部件，用于在 Flutter 应用程序中初始化 Material Design。它是 Widget Tree 的根，为子小部件提供对系统服务的访问：导航、主题、媒体查询和本地化。没有 MaterialApp，应用程序将没有标准的 Material 样式，也无法使用诸如 Scaffold、AppBar、FloatingActionButton 和 BottomNavigationBar 等小部件。

MaterialApp 向 Widget Tree 添加了什么

使用 MaterialApp 时，Flutter 会自动向树的根部添加几个关键小部件：Navigator（用于导航的屏幕堆栈）、Theme（配色方案和样式）、MediaQuery（设备信息）、Localizations（本地化字符串）、Directionality（文本方向）。这些小部件作为 InheritedWidget 实现，可通过 BuildContext 在应用程序的任何位置访问。

基本用法

MaterialApp 的最小配置只需要 home 参数 — 在主屏幕上显示的小部件。Flutter 通过 WidgetsBinding 机制自动将 home 包装到 Scaffold 中（如果它不是 Scaffold）。当使用 runApp(MaterialApp(home: MyHomePage())) 启动应用程序时，Flutter 会创建以 MaterialApp 为根的 Widget Tree。

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "My Application",
      theme: ThemeData(
        primarySwatch: Colors.blue,
        fontFamily: "Roboto",
      ),
      darkTheme: ThemeData(
        brightness: Brightness.dark,
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

在此示例中，MaterialApp 配置了基本主题（亮色和暗色）、标题和主屏幕。title 参数用于窗口标题（在桌面上）和辅助功能。theme 和 darkTheme 参数定义了应用程序在不同模式下的外观。

MaterialApp 的结构和参数

MaterialApp 接受超过 30 个参数，分为以下几类：Material Design 设置、路由、主题、本地化、错误行为以及特定平台的设置。了解关键参数可以在不编写额外代码的情况下灵活配置应用程序。

主要配置参数

title 参数设置应用程序的名称，用于窗口标题和辅助功能。color 定义 Android 上任务切换器的应用程序颜色。debugShowCheckedModeBanner 在发布版本中隐藏调试模式横幅。showPerformanceOverlay 启用带有性能信息的覆盖层。supportDarkTheme 指示应用程序是否支持暗色主题。

特定平台的参数

MaterialApp 提供用于在不同平台上配置行为的参数：restorationScopeId 用于在 Android 上重启时保存应用程序状态，scrollBehavior 用于配置不同操作系统上的滚动行为，useMaterial3 用于启用 Material 3（Material You）。Material 3 添加了动态颜色、新组件和更新的样式。

通过 theme 和 darkTheme 设置主题

主题 — MaterialApp 的主要参数之一。theme 参数接收一个 ThemeData 对象，该对象定义了亮色主题的调色板、排版、组件形状和图标。darkTheme 参数 — 暗色主题的类似配置。Flutter 根据设备的系统设置自动切换主题。

ThemeData：配色方案

ThemeData 包括 primarySwatch（主色）、colorScheme（Material 3 扩展配色方案）、brightness（亮色或暗色）、fontFamily（默认字体）、textTheme（文本样式）、cardTheme、appBarTheme、buttonTheme 以及数十个用于配置特定组件的其他参数。对于 Material 3 使用 colorScheme，对于 Material 2 使用 primarySwatch。

Material 3 动态颜色

Material 3（Material You）支持动态颜色，这些颜色从 Android 12+ 的设备壁纸中提取。要启用，请设置 useMaterial3: true 并使用 colorScheme.fromSeed 或 colorScheme.fromImageProvider。动态颜色自动从 5 种色调生成和谐调色板：primary、secondary、tertiary、neutral 和 neutralVariant。

在小部件中访问主题

任何小部件都可以通过 Theme.of(context) 访问当前主题。Theme.of 返回 ThemeData，从中可以获取 colors、textTheme 和其他参数。要订阅主题更改（例如，在亮色和暗色之间切换时），请在 build 方法内使用上下文 — Flutter 在主题更改时会自动重建小部件。

Container(
  color: Theme.of(context).colorScheme.primary,
  child: Text(
    "主题文本示例",
    style: Theme.of(context).textTheme.headlineMedium,
  ),
)

在此示例中，Theme.of(context) 从最近的 MaterialApp 获取当前主题。背景颜色和文本样式自动匹配当前主题（亮色或暗色）。切换主题时，Container 和 Text 会使用更新后的 ThemeData 中的新值重新构建。

MaterialApp 中的路由和导航

MaterialApp 集成了 Navigator — 一个管理屏幕之间过渡的堆栈导航器。initialRoute、routes 和 onGenerateRoute 参数决定了 Flutter 如何处理导航。Navigator.push 和 Navigator.pushReplacement 允许以编程方式切换屏幕，而 Navigator.pop 允许返回上一屏幕。

命名路由（routes）

routes 参数接受 Map，其中键是路由名称（字符串），值是创建屏幕小部件的函数。命名路由适用于静态导航：'/'（根路由）通常对应于 home，'/settings'、'/profile' — 其他屏幕。Navigator.pushNamed(context, '/settings') 导航到设置屏幕。

路由生成（onGenerateRoute）

onGenerateRoute — 是在 routes 中找不到路由时调用的函数。它接受 RouteSettings 并返回 MaterialPageRoute。这种方法对于动态导航很有用，当路由依赖于数据时（例如 /user/42）。onGenerateRoute 解析路由名称，提取参数并创建相应的屏幕。

深度链接和命名路由

要支持深度链接（deep links），请同时使用 onGenerateInitialRoute 和 onGenerateRoute 参数。深度链接允许通过 URL 打开应用程序的特定屏幕（例如 https://example.com/promo）。Flutter 在 Android（通过 intent filters）和 iOS（通过 universal links）上处理深度链接，并将路径传递给 onGenerateRoute。

MaterialApp(
  initialRoute: "/",
  routes: {
    "/": (context) => const HomePage(),
    "/settings": (context) => const SettingsPage(),
  },
  onGenerateRoute: (settings) {
    if (settings.name?.startsWith("/user/") == true) {
      final userId = settings.name!.split("/").last;
      return MaterialPageRoute(
        builder: (_) => UserPage(userId: userId),
      );
    }
    return null;
  },
)

在此示例中，onGenerateRoute 处理 /user/42 格式的动态路由。如果在静态 routes 中找不到路由且不匹配动态模式，Flutter 会显示一个错误页面，可以通过 onUnknownRoute 进行配置。

本地化和国际化

MaterialApp 通过 localizationsDelegates 和 supportedLocales 参数提供内置的本地化支持。LocalizationsDelegates 加载本地化字符串，supportedLocales 定义应用程序支持哪些语言。Flutter 自动检测设备语言并加载相应的本地化资源。

配置 supportedLocales 和 localizationsDelegates

supportedLocales 参数接受应用程序支持的 Locale 列表：[const Locale('en')、const Locale('ru')、const Locale('de')]。localizationsDelegates — 加载本地化字符串的委托列表。对于 Material Design，请添加 GlobalMaterialLocalizations.delegate、GlobalWidgetsLocalizations.delegate 和 GlobalCupertinoLocalizations.delegate。

应用程序字符串的本地化

要本地化您自己的字符串，请使用通过 flutter_localizations 或 intl 包创建的 AppLocalizations 类。AppLocalizations 提供用于访问本地化字符串的静态方法：AppLocalizations.of(context)!.helloMessage。MaterialApp 自动将 Localizations 传递到 Widget Tree，使其通过上下文可访问。

• flutter_localizations — 用于本地化 Material 小部件和系统字符串的官方包。
• intl — 国际化包：数字、日期、货币格式化和复数化。
• ARB 文件 — flutter_localizations 和 intl 使用的本地化字符串存储格式。

MaterialApp vs CupertinoApp vs WidgetsApp

Flutter 为不同平台 提供了三个根小部件：MaterialApp（适用于 Android 和 Web 的 Material Design）、CupertinoApp（iOS 风格）和 WidgetsApp（无样式的基本小部件）。根小部件的选择决定了整个应用程序的外观和平台组件的可用性。

MaterialApp：通用选择

MaterialApp 适用于大多数应用程序，这要归功于 Material Design 支持，它在 Android、Web 和桌面上都看起来很棒。Material Design 提供了丰富的组件库：Scaffold、AppBar、BottomNavigationBar、Drawer、SnackBar、Dialog 等等。MaterialApp 还支持带有动态颜色的 Material 3。

CupertinoApp：iOS 风格

CupertinoApp 使用符合 Apple 人机界面指南的 Cupertino Design。它提供 CupertinoPageScaffold、CupertinoNavigationBar、CupertinoTabBar 和其他 iOS 风格组件。对于 iOS 应用程序或所有平台上遵循 Apple 风格的应用程序，请使用 CupertinoApp。

WidgetsApp：最小根

WidgetsApp — 是一个没有样式的基本根小部件。它添加了 Navigator、MediaQuery 和 Localizations，但不提供主题或 Material/Cupertino 组件。WidgetsApp 适用于自定义设计系统、游戏或具有自己样式的应用程序，其中 Material 或 Cupertino 是多余的。