还记得第一个看到的Flutter组件吗？

注意：无特殊说明，flutter版本及dart版本如下：

• flutter版本： 1.12.13+hotfix.5
• dart版本： 2.7.0

materialapp

在学习flutter的过程中我们第一个看见的控件应该就是materialapp，毕竟创建一个新的flutter项目的时候，项目第一个组件就是materialapp，这是一个material风格的根控件，基本用法如下：

materialapp(
  home: scaffold(
    appbar: appbar(
      title: text('老孟'),
    ),
  ),
)

home参数是app默认显示的页面，效果如下：

title参数是应用程序的描述，在android上，在任务管理器的应用程序快照上面显示，在ios上忽略此属性，ios上任务管理器应用程序快照上面显示的是info.plist文件中的cfbundledisplayname。如果想根据区域显示不同的描述使用ongeneratetitle，用法如下：

materialapp(
  title: '老孟',
  ongeneratetitle: (context) {
    var local = localizations.localeof(context);
    if (local.languagecode == 'zh') {
      return '老孟';
    }
    return 'laomeng';
  },
  ...
)

routes、initialroute、ongenerateroute、onunknownroute是和路由相关的4个属性，路由简单的理解就是页面，路由的管理通常是指页面的管理，比如跳转、返回等。

materialapp按照如下的规则匹配路由：

1. 路由为/，home不为null则使用home。
2. 使用routes指定的路由。
3. 使用ongenerateroute生成的路由，处理除home和routes以外的路由。
4. 如果上面都不匹配则调用onunknownroute。

是不是还是比较迷糊，不要紧，看下面的例子就明白了：

materialapp(
  routes: {
    'container': (context) => containerdemo(),
    'fitted': (context) => fittedboxdemo(),
    'icon': (context) => icondemo(),
  },
  initialroute: '/',
  home: scaffold(
    appbar: appbar(
      title: text('老孟'),
    ),
  ),
  ongenerateroute: (routesettings routesettings){
        print('ongenerateroute:$routesettings');
        if(routesettings.name == 'icon'){
          return materialpageroute(builder: (context){
            return icondemo();
          });
        }
      },
      onunknownroute: (routesettings routesettings){
        print('onunknownroute:$routesettings');
        return materialpageroute(builder: (context){
          return icondemo();
        });
      },
  ...
)

initialroute设置为/，那么加载home页面。

如果initialroute设置为icon，在routes中存在，所以加载routes中指定的路由，即icondemo页面。

如果initialroute设置为icons1,此时routes中并不存在名称为icons1的路由，调用ongenerateroute，如果ongenerateroute返回路由页面，则加载此页面，如果返回的是null，且home不为null，则加载home参数指定的页面，如果home为null，则回调onunknownroute。

theme、darktheme、thememode是关于主题的参数，设置整个app的主题，包括颜色、字体、形状等，修改主题颜色为红色用法如下：

materialapp(
  theme: themedata(
    primarycolor: colors.red
  ),
  darktheme: themedata(
      primarycolor: colors.red
  ),
  thememode: thememode.dark,

效果如下：

locale、localizationsdelegates、localelistresolutioncallback、localeresolutioncallback、supportedlocales是区域设置和国际化相关的参数，如果app支持多国语言，那么就需要设置这些参数，默认情况下，flutter仅支持美国英语，如果想要添加其他语言支持则需要指定其他materialapp属性，并引入flutter_localizations 包，到2019年4月，flutter_localizations包已经支持52种语言，如果你想让你的应用在ios上顺利运行，那么你还必须添加“flutter_cupertino_localizations”包。

在pubspec.yaml文件中添加包依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_cupertino_localizations: ^1.0.1

设置如下：

materialapp(
  localizationsdelegates: [
    globalmateriallocalizations.delegate,
    globalwidgetslocalizations.delegate,
    globalcupertinolocalizations.delegate
  ],
  supportedlocales: [
    const locale('zh', 'ch'),
    const locale('en', 'us'),
  ],
  ...
)

• globalmateriallocalizations.delegate ：为material components库提供了本地化的字符串和其他值。
• globalwidgetslocalizations.delegate：定义widget默认的文本方向，从左到右或从右到左。
• globalcupertinolocalizations.delegate：为cupertino（ios风格）库提供了本地化的字符串和其他值。

supportedlocales参数指定了当前app支持的语言。

localeresolutioncallback和localelistresolutioncallback都是对语言变化的监听，比如切换系统语言等，localeresolutioncallback和localelistresolutioncallback的区别是localeresolutioncallback返回的第一个参数是当前语言的locale，而localelistresolutioncallback返回当前手机支持的语言集合，在早期的版本手机没有支持语言的集合，只显示当前语言，在设置->语言和地区的设置选项效果如下：

在早期是没有红色区域的。

因此我们只需使用localelistresolutioncallback即可，通过用户手机支持的语言和当前app支持的语言返回一个语言选项。

通常情况下，如果用户的语言正好是app支持的语言，那么直接返回此语言，如果不支持，则返回一个默认的语言，用法如下：

materialapp(
  localelistresolutioncallback:
      (list<locale> locales, iterable<locale> supportedlocales) {
    if (locales.contains('zh')) {
      return locale('zh');
    }
    return locale('en');
  },
  ...
)

在app中也可以通过如下方法获取区域设置：

locale mylocale = localizations.localeof(context);

还有几个方便调试的选项，debugshowmaterialgrid：打开网格调试

materialapp(
  debugshowmaterialgrid: true,

效果如下：

showperformanceoverlay：打开性能检测

materialapp(
  showperformanceoverlay: true,

效果如下：

右上角有一个debug的标识，这是系统在debug模式下默认显示的，不显示的设置如下：

materialapp(
  debugshowcheckedmodebanner: true,
  ...
)

cupertinoapp

我想你一定能想到既然有material风格的materialapp，那么也应该有cupertino（ios）风格与之相对应，是的cupertino风格的是cupertinoapp，cupertinoapp的属性及用法和materialapp一模一样，就不在具体介绍了。

欢迎加入flutter的微信交流群(laomengit)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。