Note: The Flutter and Dart versions are as follows without special instructions:

  • Flutter version: 1.12.13+ Hotfix.5
  • Dart version: 2.7.0

MaterialApp

The first control we will see when learning about Flutter is the MaterialApp. After all, when creating a new Flutter project, the first component of the project is the MaterialApp. This is a Material style root control.

MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      title: Text('the old meng'),),),)Copy the code

The home parameter is the page that the App displays by default. The effect is as follows:

The title parameter is the description of the application. On Android, this property is displayed above the task manager application snapshot. On IOS, this property is ignored, and the task Manager application snapshot on IOS displays the CFBundleDisplayName in the info.plist file. If you want to display different descriptions by region, use onGenerateTitle as follows:

MaterialApp(
  title: 'the old meng',
  onGenerateTitle: (context) {
    var local = Localizations.localeOf(context);
    if (local.languageCode == 'zh') {
      return 'the old meng';
    }
    return 'laomeng'; },...).Copy the code

Routes, initialRoute, onGenerateRoute and onUnknownRoute are four attributes related to routes. Routes are simply understood as pages. Route management usually refers to page management, such as jump and return.

The MaterialApp matches routes according to the following rules:

  1. Routing for/.homeIf the value is not nullhome.
  2. useroutesThe specified route.
  3. useonGenerateRouteGenerated route, processing divisionhomeandroutesExternal routes.
  4. Called if none of the above matchesonUnknownRoute.

Is it still confusing? Never mind, look at the following example to understand:

MaterialApp(
  routes: {
    'container': (context) => ContainerDemo(),
    'fitted': (context) => FittedBoxDemo(),
    'icon': (context) => IconDemo(),
  },
  initialRoute: '/',
  home: Scaffold(
    appBar: AppBar(
      title: Text('the old meng'),
    ),
  ),
  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){
          returnIconDemo(); }); },...).Copy the code

InitialRoute is set to /, and the home page is loaded.

If initialRoute is set to icon, it exists in Routes, so load the route specified in Routes, which is the IconDemo page.

If initialRoute is set to icons1, then there is no route named icons1 in the routes. Call onGenerateRoute. If onGenerateRoute returns the route page, the page will be loaded. If home is not null, the page specified by the home parameter is loaded. If home is null, onUnknownRoute is called back.

Theme, darkTheme, themeMode are parameters about the theme. Set the theme of the entire App, including color, font, shape, etc. Change the theme color to red.

MaterialApp(
  theme: ThemeData(
    primaryColor: Colors.red
  ),
  darkTheme: ThemeData(
      primaryColor: Colors.red
  ),
  themeMode: ThemeMode.dark,
Copy the code

The effect is as follows:

The locale, localizationsDelegates, localeListResolutionCallback, localeResolutionCallback, supportedLocales is the locale, and international related parameters, By default, Flutter supports only American English. If you want to add support for other languages, you need to specify other MaterialApp properties and introduce the Flutter_localIzations package. By April 2019, Flutter_localizations is available in 52 languages, and if you want your app to work on iOS, you’ll need to add flutter_cupertino_Localizations as well.

Add package dependencies to the pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:
    sdk: flutter
  flutter_cupertino_localizations: ^1.01.

Copy the code

The Settings are as follows:

MaterialApp(
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate
  ],
  supportedLocales: [
    const Locale('zh'.'CH'),
    const Locale('en'.'US'),],...).Copy the code
  • GlobalMaterialLocalizations. Delegate: for Material Components library provides a localized string and other values.
  • GlobalWidgetsLocalizations. Delegate: define widget default text direction, from left to right or from right to left.
  • GlobalCupertinoLocalizations. Delegate: for the Cupertino (ios) style library provides a localized string and other values.

The supportedLocales parameter specifies the language supported by the current App.

LocaleResolutionCallback and localeListResolutionCallback are listening to the language changes, such as switching system language, etc., Is the difference between localeResolutionCallback and localeListResolutionCallback localeResolutionCallback returns the first parameter is the current language Locale, And localeListResolutionCallback returns the current mobile phone support the language set, in the early version of the mobile phone did not support the language set, only show the current language, in the Settings – > language and regional Settings effect is as follows:

In the early days there were no red areas.

So we just use localeListResolutionCallback can, through the user’s phone support and current App supported languages returns a language option.

In general, if the user’s language happens to be a language supported by the App, then this language is returned directly, if not, a default language is returned. The usage is as follows:

MaterialApp(
  localeListResolutionCallback:
      (List<Locale> locales, 可迭代<Locale> supportedLocales) {
    if (locales.contains('zh')) {
      return Locale('zh');
    }
    return Locale('en'); },...).Copy the code

You can also obtain the region Settings in the App by using the following methods:

Locale myLocale = Localizations.localeOf(context);
Copy the code

DebugShowMaterialGrid: Opens grid debugging

MaterialApp(
  debugShowMaterialGrid: true.Copy the code

The effect is as follows:

ShowPerformanceOverlay: Enables performance monitoring

MaterialApp(
  showPerformanceOverlay: true.Copy the code

The effect is as follows:

There is a DEBUG identifier on the upper right corner, which is displayed by default when the system is in DEBUG mode. The Settings that are not displayed are as follows:

MaterialApp(
  debugShowCheckedModeBanner: true,...).Copy the code

CupertinoApp

So I’m sure you’d think that if there’s a Material style of MaterialApp, there’s a Cupertino style of ios, and Cupertino style is CupertinoApp, The properties and usage of CupertinoApp are exactly the same as those of MaterialApp.

communication

Old Meng Flutter blog address (nearly 200 controls usage) : laomengit.com