Intro to Flutter

Ken Baldauf

Senior Software Engineer @ Originate

What is Flutter?

  • Google's cross platform mobile SDK
  • Reached v1.0 on December 4th, 2018
  • Supports
    • ARM devices running Jelly Bean (API 16) or newer
    • iPhone 4S or newer running  iOS 8 or newer
    • Android Studio, IntelliJ, VS Code, Emacs & Vim
  • Written in Dart

What is Dart?

  • Developed by Google
  • Can be transcompiled into JavaScript
  • Characteristics
    • Statically typed
    • Object oriented
    • Garbage collected
    • C style syntax
    • Pass by reference
      • Except primitives

Dart Basics

  • Identifiers are public by default
    • Compiler enforces privacy on identifiers prefixed with an underscore
  • Variables
    • var - mutable
    • final - immutable
    • const - compile-time constant
    • Implicit setters/getters for instance variables
  • Supports top-level functions & variables
  • Supports async & await
  • Dart 2 made new keyword is optional

How Does Flutter Work?

  • Forgoes WebViews & stock OEM widgets
  • Utilizes a high-performance C++ rendering engine to draw widgets
    • Offers greater flexibility in building motion-rich UIs
    • Easier to develop both platforms concurrently without needing to align with 2 separate feature sets
  • Features a catalog of Material Design & Cupertino widgets
  • Also allows developers to create new custom widgets

How Does Flutter Work on Android?

  • The Dart code is ahead-of-time (AOT) compiled into a native, ARM and x86 libraries
  • Libraries are then included in a “runner” Android project which is used to build an APK
  • When launched, any rendering, input or event handling, are delegated to the compiled Flutter library and your app code
  • Debug mode builds run the Dart code in a Virtual Machine to allow for stateful hot reloading

How Does Flutter Work on iOS?

  • The Dart code is ahead-of-time (AOT) compiled into a native, ARM library
  • Libraries are then included in a “runner” iOS project which is used to build an IPA
  • When launched, any rendering, input or event handling, are delegated to the compiled Flutter library and your app code
  • Debug mode builds run the Dart code in a Virtual Machine to allow for stateful hot reloading

Flutter Basics

  • Uses a pubspec.yaml file to manage app dependencies
  • Almost everything (including alignment, padding & layout) is a widget
  • A widget's main job is to provide a build method that describes how to display the widget
  • Such build methods are often described in terms of other, lower-level widgets

Stateless Widgets

  • Are immutable and non-dynamic
  • Depends only on the data passed into its constructor
  • Examples:
    • Text
    • Button
    • Icon

Stateful Widgets

  • Are immutable, but dynamic
  • Owns an instance of a State class
    • State persists over the lifetime of the widget
  • Examples:
    • Form
    • Checkbox
    • Image

State

  • Flutter is declarative
    • It builds the UI to reflect the app's current state
    • UI redraws when the app state changes
  • State can be changed via setState method
  • Advanced state management solutions:
    • ScopedModels
    • BLoC (Business Logic Component)
    • Redux

Navigation

  • Route is an abstraction of screen within the app
  • Navigator is a StatefulWidget that manages a stack of the app's routes
    • Pushing a route to the Navigator updates the display to that route
    • Popping a route from the Navigator returns the display to the previous route

Pros

  • Cross platform for iOS, Android & Fuchsia
  • Stateful hot reloading - see changes in seconds
  • Improved startup times and performance over React Native due to lack of JavaScript bridge
  • UI widgets are easy to write and generally feel & look good on both Android & iOS devices
  • Material & Cupertino widgets aim to be pixel-perfect with their native Android & iOS counterparts

Cons

  • Dart - easy to use & learn, but will be new to many
  • Lacks access to the expansive library of 3rd party native mobile SDKs (Twilio, Stripe, etc.)
  • Many CI solutions lack built-in support for Flutter
  • Lacking Android/Apple TV support
  • Built for 2D apps; lacks 3D OpenGL support
  • Google
  • Larger APK/IPA sizes

A Note About APK Sizes

  • Flutter APK: ~ 4.2 MB
  • React Native APK: ~ 7 MB
  • Kotlin APK: ~ 550 KB
  • Java APK: ~ 539 KB

Advanced Flutter Topics

  • TargetPlatform to make OS specific changes
  • Animations are powered by an AnimationController
  • Communicate with native code via platform channels
// CLIENT CODE
static const platform = const MethodChannel('org.ocandroid.channel');
// invokeMethod returns Future
await platform.invokeMethod('someMethod');

// ANDROID CODE
MethodChannel(flutterView, "org.ocandroid.channel")
    .setMethodCallHandler { call, result -> {
      if (call.method == "someMethod") {
        if (someCondition) {
          result.success(someValue)
        } else {
          result.error("errCode", "errMessage", errDataObj)
        }
      } else {
        result.notImplemented()
      }
}

Questions?

Intro to Flutter

By Kenneth Baldauf

Made with Slides.com

Intro to Flutter

Flutter is Google's cross platform mobile application framework; let's take a look and see what all the hype is about.

  • 498

More from Kenneth Baldauf