還記得第一個看到的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)，一起學習，一起進步，生活不止眼前的苟且，還有詩和《遠方》。

當然我也非常希望您關注我個人的公衆号，裡面有各種福利等着大家哦。