一文来带你了解 Flutter MaterialApp

关于MaterialApp 配置

MaterialApp是Flutter中的一个重要小部件，它作为应用程序的根部小部件，并提供了一些基本的配置和功能。

属性	描述
title	应用程序的标题，通常显示在任务管理器中或设备的应用程序切换器中。
home	应用程序的初始页面，通常是一个Widget。
routes	定义应用程序的静态路由映射表，将路由名称映射到相应的页面组件。
onGenerateRoute	定义应用程序的动态路由生成函数，可以根据需要自定义路由处理逻辑。
navigatorKey	用于访问导航器的全局键，可以在应用程序的任何地方使用该键来执行导航操作。
initialRoute	指定应用程序的初始路由名称，如果设置了home属性，则忽略此属性。
onUnknownRoute	定义当导航到未知路由时的处理逻辑，可以显示错误页面或执行其他操作。
theme	应用程序的主题样式，包括颜色、字体和其他视觉属性。
darkTheme	应用程序的暗黑模式主题样式，可以与theme属性一起使用，根据系统设置自动切换主题。
themeMode	定义应用程序的主题模式，可以是ThemeMode.light、ThemeMode.dark或ThemeMode.system。
debugShowCheckedModeBanner	控制是否显示调试模式下的横幅标志，默认为true。

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 应用程序的标题，通常显示在设备任务管理器中
      title: 'My App',

      // 应用程序的主题配置
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色，影响AppBar、按钮等部件的颜色
        accentColor: Colors.orange, // 强调色，影响进度条、选择控件等部件的颜色
        fontFamily: 'Roboto', // 默认字体
        // 其他主题属性，如文本样式、按钮样式等
      ),

      // 初始路由名称，即应用程序启动时显示的页面
      initialRoute: '/',

      // 路由表，将路由名称与对应的Widget关联起来
      routes: {
        '/': (context) => HomePage(),
        '/details': (context) => DetailsPage(),
      },

      // 自定义路由生成器，用于处理未在路由表中定义的路由
      onGenerateRoute: (settings) {
        // 根据settings生成相应的路由
        // 返回一个PageRoute对象，用于实现页面切换动画等效果
      },

      // 404页面，当路由表和自定义路由生成器都无法匹配时显示
      onUnknownRoute: (settings) {
        // 返回一个PageRoute对象，用于显示404页面
      },

      // 本地化配置，用于支持多语言
      localizationsDelegates: [
        // 添加本地化代理
      ],
      supportedLocales: [
        // 支持的语言列表
      ],

      // 其他属性，如调试模式、国际化等
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go to Details'),
          onPressed: () {
            Navigator.pushNamed(context, '/details');
          },
        ),
      ),
    );
  }
}

class DetailsPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Go back'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

在上面的代码中，我们使用MaterialApp作为应用程序的根Widget，并进行了以下配置：

• title: 设置应用程序的标题，通常会显示在设备的任务管理器中。
• theme: 配置应用程序的主题，包括主色（primarySwatch）和强调色（accentColor），还可以设置字体（fontFamily）和其他主题属性。
• initialRoute: 设置初始路由名称，即应用程序启动时显示的页面。
• routes: 定义应用程序的路由表，将路由名称与对应的Widget关联起来。
• onGenerateRoute: 可选参数，用于自定义路由生成器。当应用程序尝试访问未在路由表中定义的路由时，会调用该回调函数。你可以根据settings参数生成相应的路由，并返回一个PageRoute对象，用于实现页面切换动画等效果。
• onUnknownRoute: 可选参数，用于指定404页面。当应用程序无法匹配到路由表中定义的路由且未提供自定义路由生成器时，会调用该回调函数。你可以返回一个PageRoute对象，用于显示404页面或其他错误提示页面。
• localizationsDelegates和supportedLocales: 用于支持应用程序的本地化。你可以添加本地化代理（localizationsDelegates）和支持的语言列表（supportedLocales），以便应用程序能够根据用户的语言偏好显示相应的翻译内容。

除了上述常用的配置参数外，MaterialApp还有其他一些属性，如debugShowCheckedModeBanner用于控制是否显示调试模式下的横幅、navigatorObservers用于监听导航器的变化等。