PKJ Lessons and Learning Journey - Flutter

By pjain      Published May 10, 2020, 9:23 p.m. in blog Programming   



  • Note CupertinoApp class is very similar to MaterialApp - also wraps WidgetsApp.

  • However use this with caution on Android since it may produce behaviors Android users are not expecting such as:

    • Pages will be dismissible via a back swipe like ios.
    • Scrolling past extremities will trigger iOS-style spring overscrolls.
    • The San Francisco font family is unavailable on Android and can result in undefined font behavior.
  • Tutorial

It uses an ecosystem parallel to Material hierarchy

  • CupertinoPageScaffold, which provides a standard page layout default with nav bars.
  • Navigator, which is used to manage the app's stack of pages.
  • CupertinoPageRoute, which defines an app page that transitions in an iOS-specific way.

MaterialApp basics

MaterialApp wraps several widgets that are commonly required for material design applications.

  • It extends WidgetsApp by adding material-design specific functionality, such as AnimatedTheme and GridPaper.

  • Supports Internationalization

  • Tutorial


Properties of MaterialApp

App Styling, Themes, Transitions

 String title: ''
 GenerateAppTitle onGenerateTitle
 Color color
 ThemeData theme
 ThemeData darkTheme
 ThemeMode themeMode: ThemeMode.system
 TransitionBuilder builder
  • Theme example MaterialApp( theme: ThemeData( brightness: Brightness.dark, primaryColor: Colors.blueGrey ), )

Locales, Internationalize

 Locale locale
 Iterable<LocalizationsDelegate> localizationsDelegates
 LocaleListResolutionCallback localeListResolutionCallback
 LocaleResolutionCallback localeResolutionCallback
 Iterable<Locale> supportedLocales: const [Locale('en''US')]

Debug Support

 bool debugShowMaterialGrid: false
 bool debugShowCheckedModeBanner: false,  // happens in release builds
 bool showPerformanceOverlay: false
 bool checkerboardRasterCacheImages: false
 bool checkerboardOffscreenLayers: false
 bool showSemanticsDebugger: false


  • This is used to manage the app's stack of pages.
  • the Navigator CAN be created in the MaterialApp - but if you do so - you need to implement /

    GlobalKey navigatorKey - key to use when building the Navigator List navigatorObservers: const []

Named Page Routes defined for top level Navigator

  • Scaffold widget is the base for Pages and provides standard app elements like an AppBar and a Drawer.

    Widget home - widget default route of app (Navigator.defaultRouteName, which is /) Map routes: const {} String initialRoute The name of the first route to show, if a Navigator is built RouteFactory onGenerateRoute RouteFactory onUnknownRoute

  • MaterialPageRoute, which defines an app page that transitions in a material-specific way.

  • In top level MaterialApp set routes, now you can just refer by name not "instance"

    MaterialApp( initialRoute: '/home', // home: Home(), //<-- this home property is the / route! routes: { //<-- Maps to Pages! '/' : '/home': (BuildContext context) => Home(), '/details': (BuildContext context) => Details(), '/about': (BuildContext context) => About(), }, );

  • MaterialApp also enables Hero animations - handled as an observer of top-level Navigator that mods wgt build!

  • However the real use is in the individual pages!

  • BPR Style: package each page into a separate module, do an import, and make as function

Search Order

  • The MaterialApp configures the top-level Navigator to search for routes in the following order:
  • For the / route, the home property, if non-null, is used.
  • Otherwise, the routes table is used, if it has an entry for the route.
  • Otherwise, onGenerateRoute is called, if provided. It should return a non-null value for any valid route not handled by home and routes.
  • Finally if all else fails onUnknownRoute is called.

Deep Linking INTO an app

If Navigator is created in top MaterialApp at least one of these options must handle the / route.

The / route is used when an invalid initialRoute is specified on startup (e.g. by another application launching this one with an intent on Android - see Window.defaultRouteName).

Push, Pop pages

The Navigator widget manages a stack of routes to move between pages. You can optionally pass data to the destination page and back to the original page. To start navigating between pages, you use the Navigator.of(context).push, pushNamed, and pop methods. * Native friendly eg on iOS slide in page from right for a page, but modal dialog bottom2top - on Android slides bottom to top.

// Go to page Details()
    fullscreenDialog: true, // details page appbar includes a Closebutton
    builder: (ctx) =&gt; Details(),  // include details.dart import

// Close page pop 
Navigator.of(ctx).pop(); // - no return value
Navigator.of(ctx).pop('Done'); // return String value
  • Then to push a named route to stack .. Navigator.of(context).pushNamed('/details');

  • You also have an optional second argument to pass data // Pass Arguments Navigator.of(context).pushNamed('/details', arguments: {'emotion': 'Happy'} //map of arguments like JSON );

Custom route transitions/animations

PageRouteBuilder provides an Animation object. This Animation can be used with Tween and Curve objects to customize the transition animation. See youtube video and code for indepth on this.

Takeaway: You can do pretty much any animation in transitioning between pages of navigator.

    pageBuilder: (BuildContext context,
        Animation&lt;double&gt; animation, 
        Animation&lt;double&gt; secondaryAnimation) {
      return Details();
    transitionsBuilder: (BuildContext context,
        Animation&lt;double&gt; animation, 
        Animation&lt;double&gt; secondaryAnimation, 
        Widget child) {
          return Align(
            child: SizeTransition(
              sizeFactor: animation,
              child: child,
        ); },
    transitionDuration: Duration(milliseconds: 500),

--- BPR Sw Mgt for F! - importance of AR

Declarative UI frameworks eliminate whole classes of bugs. But they can also be a puzzle until you figure out how to structure your app logic around them. Walk through Flutter's app with live data and see how to structure content in a simple yet scalable way. You'll come out understanding the main approaches of state management in declarative frameworks and have a concrete applicable solution.


UXD: Progressive App Development/Refinement

  • Go from HLL App description -> Declartive UI build

Hang Biz logic - but abstractable, Separation

Testing, CI/CD

QA Functional - help deploy with confidence


IDE tools

  • Visual Studio extensions are they using for the stuff like "Wrap in a component", "Convert to statefull widget", etc.?


There are no comments yet

Add new comment

Similar posts

List++ Advanced Application Features

Interview Questions in Flutter

NAV: URL Launcher, Deep Links

NAV: Navigation Drawers