What’s Inside material.dart #2 — Flutter

Published in

Flutter Community

6 min readMay 22, 2019

Hello All Flutter Developers

IO19 is a big thing for flutter they have released flutter_web and flutter now also supports mobile, desktops, embedded and more

Let’s start exploring flutter.

This the continuation of my previous article What’s Inside material.dart #1 — Flutter

What’s Inside material.dart #1 — Flutter

Edit description

medium.com

Now this is the second article

Let’s get started

if you see when you ctrl + click on the material.dart in your code, you will be taken to material.dart let's see what's inside it

app.dart (MaterialApp)

export 'src/material/app.dart';

Let’s see what’s inside app.dart

Inside app.dart we find MaterialApp class

If we go inside and see _MaterialAppState we can notice it returns WidgetsApp

Here what comments say about

A convenience class that wraps a number of widgets that are commonly required for an application. One of the primary roles that [WidgetsApp] provides is binding the system back button to popping the [Navigator] or quitting the application.

WidgetsApp class accepts most of the parameters that MaterialApp is accepting.

There is much stuff inside the WidgetsApp we will see it in details later

// _MaterialStateApp
 @override
  Widget build(BuildContext context) {
    Widget result = WidgetsApp(
      key: GlobalObjectKey(this),
      navigatorKey: widget.navigatorKey,
      navigatorObservers: _navigatorObservers,
        pageRouteBuilder: <T>(RouteSettings settings, WidgetBuilder builder) =>
            MaterialPageRoute<T>(settings: settings, builder: builder),
      home: widget.home,
      routes: widget.routes,
      ....

MaterialApp Accepts multiple parameters. Most of us a very Familiar with few on those parameters like home, color, theme, routes, debugShowCheckedModeBanner Let's see what others will also do

const MaterialApp({
    Key key,
    this.navigatorKey,
    this.home,
    this.routes = const <String, WidgetBuilder>{},
    this.initialRoute,
    this.onGenerateRoute,
    this.onUnknownRoute,
    this.navigatorObservers = const <NavigatorObserver>[],
    this.builder,
    this.title = '',
    this.onGenerateTitle,
    this.color,
    this.theme,
    this.darkTheme,
    this.locale,
    this.localizationsDelegates,
    this.localeListResolutionCallback,
    this.localeResolutionCallback,
    this.supportedLocales = const <Locale>[Locale('en', 'US')],
    this.debugShowMaterialGrid = false,
    this.showPerformanceOverlay = false,
    this.checkerboardRasterCacheImages = false,
    this.checkerboardOffscreenLayers = false,
    this.showSemanticsDebugger = false,
    this.debugShowCheckedModeBanner = true,
  }) : assert(routes != null),
       assert(navigatorObservers != null),
       assert(title != null),
       assert(debugShowMaterialGrid != null),
       assert(showPerformanceOverlay != null),
       assert(checkerboardRasterCacheImages != null),
       assert(checkerboardOffscreenLayers != null),
       assert(showSemanticsDebugger != null),
       assert(debugShowCheckedModeBanner != null),
       super(key: key);

navigatorKey

In simple words, a key used while building Navigator

If a [navigatorKey] is specified, the [Navigator] can be directly manipulated without first obtaining it from a [BuildContext] via [Navigator.of]: from the [navigatorKey], use the [GlobalKey.currentState] getter.

above line says that if we provided navigatorKey we can directly use it to call pop, push and all the operations we perform using Navigator.of()

home

The widget for the default route of the app ([Navigator.defaultRouteName], which is /).

This is the route that is displayed first when the application is started normally, unless [initialRoute] is specified. It’s also the route that’s displayed if the [initialRoute] can’t be displayed.

If you specify home your route should not include any entry for /

routes

This is the top-level routing table

routes: <String, WidgetBuilder>{
    '/': (context) => HomePage(),
    '/second': (context) => SecondHome(),
}

initialRoute

The name of the first route to show if a [Navigator] is built.

Defaults to [Window.defaultRouteName], which may be overridden by the code that launched the application.

initialRoute: '/',

onGenerateRoute

The route generator callback used when the app is navigated to a named route.

onGenerateRoute: (RouteSettings settings) {
    switch (settings.name) {
        case '/':
            return MaterialPageRoute(builder: (context)=> HomePage());
            break;
        case '/second':
            return MaterialPageRoute(builder: (context)=> SecondPage());
            break;
    }
},

Advanced Routing and Navigator — Nitish Kumar Singh — Medium

First of all, I am going to start with basic Routing which you can also read from here: Medium Blog by Ketan Parmar

link.medium.com

onUnknownRoute

This callback will be triggered when onGenerateRoute is failed to generate a route except for the [initialRoute].

We can use this call back to generate a 404 Page

navigatorObservers

It accepts a List for NavigatorObserver

NavigatorObserver in simple words from comments

An interface for observing the behavior of a [Navigator].

A NavigatorObserver

var navigatorObserver = NavigatorObserver();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      ...
      navigatorObservers: [navigatorObserver],
      ...class _MyHomePageState extends State<MyHomePage>
    with NavigatorObserver {    ...    @override
    void didPop(Route route, Route previousRoute) {
        super.didPop(route, previousRoute);
    }    @override
    void didPush(Route route, Route previousRoute) {
        super.didPush(route, previousRoute);
    }    @override
    void didRemove(Route route, Route previousRoute) {
        super.didRemove(route, previousRoute);
    }    @override
    void didReplace({Route newRoute, Route oldRoute}) {
        super.didReplace(newRoute: newRoute, oldRoute: oldRoute);
    }    @override
    void didStartUserGesture(Route route, Route previousRoute) {
        super.didStartUserGesture(route, previousRoute);
    }    @override
    void didStopUserGesture() {
        super.didStopUserGesture();
    }
        
    ...}

builder

This is a TransitionBuilder which is rarely used.

We can override it to build custom transition animations between pages

title

title is a one-line description used by the device to identify the app for the user.

On Android, the titles appear above the task manager’s app snapshots which are displayed when the user presses the “recent apps” button. On iOS, this value cannot be used. CFBundleDisplayName from the app's Info.plist is referred to instead whenever present, CFBundleName otherwise.

To provide a localized title instead, use [onGenerateTitle].

onGenerateTitle

If it is not null this function is used to generate title

[onGenerateTitle] callback is called each time the [WidgetsApp] rebuilds

colour

Primary Color used for the application

theme

We can set default properties for our app like fonts, styles, color, etc.,

darkTheme

Theme that app should use when dark theme is requested by OS

locale

using this property we can set the initial localization of the app

localizationsDelegates

The delegates for this app’s [Localizations] widget. When a [localeListResolutionCallback] is provided, Flutter will first attempt to resolve the locale with the provided [localeListResolutionCallback]. If the callback or result is null, it will fall back to trying the [localeResolutionCallback]. If both [localeResolutionCallback] and [localeListResolutionCallback] are left null or fail to resolve (return null), the [WidgetsApp.basicLocaleListResolution] fallback algorithm will be used.

The priority of each available fallback is:

[localeListResolutionCallback] is attempted first.
[localeResolutionCallback] is attempted second.
Flutter’s [WidgetsApp.basicLocaleListResolution] algorithm is attempted last.

localeListResolutionCallback

This callback is responsible for choosing the app’s locale when the app is started, and when the user changes the device’s locale.

localeResolutionCallback

This call back is used when localeListResolutionCallback is resolving failed

supportedLocales

The default value of the property is [const Locale('en', 'US')]

example:

// Full Chinese support for CN, TW, and HK
supportedLocales: [
  const Locale.fromSubtags(languageCode: 'zh'), // generic Chinese 'zh'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans'), // generic simplified Chinese 'zh_Hans'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant'), // generic traditional Chinese 'zh_Hant'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hans', countryCode: 'CN'), // 'zh_Hans_CN'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'TW'), // 'zh_Hant_TW'
  const Locale.fromSubtags(languageCode: 'zh', scriptCode: 'Hant', countryCode: 'HK'), // 'zh_Hant_HK'
],