Flutter Widget - MaterialApp

Flutter Widgets

Flutter 2.0.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 60bd88df91 (10 weeks ago) • 2021-03-03 09:13:17 -0800
Engine • revision 40441def69
Tools • Dart 2.12.0

1.材料设计根控件 MaterialApp

一、概览图

二、MaterialApp 是什么？

MaterialApp 是我们app开发中常用的符合MaterialApp Design设计理念的入口Widget，是一个Material风格的根控件。

三、详细

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_widget_study/page/home_page.dart';
import 'package:flutter_widget_study/page/not_find_page.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // 应用程序描述
      title: 'MaterialApp Widget study',

      // 根据区域显示不同的应用描述
      onGenerateTitle: (context) {
        var local = Localizations.localeOf(context);
        if (local.languageCode == 'zh') {
          return '材料（Android）设计风格根控件学习';
        }
        return 'MaterialApp Widget study';
      },

      // 主题
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      darkTheme: ThemeData(
        primarySwatch: Colors.green
      ),

      // 指定主题
      themeMode: ThemeMode.dark,

      //App 默认显示的页面，改参数不能为空
      home: HomePage(),

      //初始路由
      initialRoute: '/',

      // 设置找不到路由时的错误页面
      onUnknownRoute: (RouteSettings routeSettings) =>
          MaterialPageRoute(builder: (context) => NotFindPage()),

      // 国际化配置
      localizationsDelegates: [
        //为Material Components库提供了本地化的字符串和其他值
        GlobalMaterialLocalizations.delegate,
        //定义widget默认的文本方向，从左到右或从右到左
        GlobalWidgetsLocalizations.delegate,
        //为Cupertino（ios风格）库提供了本地化的字符串和其他值
        GlobalCupertinoLocalizations.delegate
      ],

      //指定当前App支持的语言
      supportedLocales: [
        const Locale('zh', 'CH'),
        const Locale('en', 'US'),
      ],

      //通过用户手机支持的语言和当前App支持的语言返回一个语言选项
      localeListResolutionCallback:
          (List<Locale> locales, Iterable<Locale> supportedLocales) {
        if (locales.contains('zh')) {
          return Locale('zh');
        }
        return Locale('en');
      },

      // 打开网格调试
      // debugShowMaterialGrid: true,

      // 打开性能检测
      // showPerformanceOverlay: true,

      // 右上角DEBUG
      // debugShowCheckedModeBanner: true,
    );
  }
}

四、其他

路由、国际化采用其他方式实现，见后续文章。