Title Text

What is Flutter?

A mobile turned everything UI Framework

Google’s portable UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. Flutter works with existing code, is used by developers and organizations around the world, and is free and open source.

 

Runs Everywhere!

  • Android
  • iOS
  • Web (beta)
  • Desktop (alpha)
  • IoT (community)

Beautiful User Experiences

The #1 Question

Speed!

Without crashing

As Fast As Native

  • Dart compiles to machine code
  • Skia is a really fast render engine
  • Optimized to run natively fast!

Built on

  • 60 fps everywhere
  • Looks the same on ios and android
  • Opensource
  • Android's native engine written in C++

How easy is it to learn?

  • Web Developer: Difficult at first
  • Other UI frameworks: A little easier
  • Newby: Easier than web
  • Rows and Columns are flexbox based
  • Learn Widgets because they are everything

Tip: Get to know the basic widgets!

DART???

  • Designed to integrate
  • UI first features
  • Server support
  • Multi-threaded
  • OOP

Idea -> Launch = Fast!

Favroite Part

Let's Compare

frameworks

  • Hot reloading
  • Native UI 
  • Limited components
  • Mediocre performance
  • Plenty of developers
  • Great community
  • Plugin support is good
  • Facebook & Tesla
  • Partly-shared UI & Logic
  • Good CI/CD
  • Hot reloading
  • Near-native UI
  • Plenty of components
  • Native performance
  • Small Developer Pool
  • Great community
  • Plugin support is great
  • Google & Alibaba
  • Shared UI & Logic
  • Amazing CI/CD

Verdict: Build Apps faster with Flutter

  • Live reloading
  • Web UI
  • Some components
  • Mediocre performance
  • Largest Developer Pool
  • Ok Community
  • Plugin support is poor
  • McLaren Automotive
  • Shared UI & Logic
  • Sketchy CI/CD

Verdict: Build Faster Apps with Flutter

  • Hot reloading
  • Near-native UI
  • Plenty of components
  • Native performance
  • Small Developer Pool
  • Great Community
  • Plugin support is great
  • Google & Alibaba
  • Shared UI & Logic
  • Amazing CI/CD
  • Hot reloading
  • Native UI 
  • Decent components
  • Native performance
  • Smallish Developer Pool
  • Great community
  • Plugin support is top-notch
  • Most Major Apps
  • No sharing of logic/UI
  • Great CI/CD

Verdict: Build 2 Different Apps with Flutter

  • Hot reloading
  • Near-native UI
  • Plenty of components
  • Native performance
  • Small Developer Pool
  • Great community
  • Plugin support is great
  • Google & Alibaba
  • Shared UI & Logic
  • Amazing CI/CD

Others

  • Appcelerator Titanium
  • Onsen UI
  • Much more
 

Write Some Code

dartpad.dev

import 'package:flutter/cupertino.dart';

class CupertinoStoreApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: CupertinoStoreHomePage(),
    );
  }
}

Let's build one of my projects with CodeMagic

Final Case For

Flutter

Styles

>

  • Predictable outcome 
  • More composable by nature
  • Themes built in

Quick Fire Facts

  • No JavaScript bridge
  • Compile-time
  • Write once, test once, deploy everywhere
  • Code sharing
  • Productivity and collaboration
  • Code maintenance
  • Reactive
  • Large extendable widget library
  • VS Code integration

Everything Just Works!

Getting Started

Tools to help

Must-Visit Sites

 

Tools

Great Plugins

State Management

  • Provider (recommended)
  • BLoC
    • Great for complex apps
    • Flutter Specific
  • Redux
    • Great for complex apps
    • If know redux than you might prefer
  • Mobx
    • Feels familiar
    • Has to generate 
    • Great for complex apps
  • Hook
    • Great but too much boilerplate at times
    • Feels familiar to React Hooks

Tips

  • Enable auto-formatting in your IDE
  • Separate your style, state, and widgets early on
  • Check Dart Plugins before creating your own solution
  • Build your app to ios, android, and web early on
  • Get used to modifying the Plist and (all of) Android build scripts

Case Closed

Start using the future

Why you should choose Flutter

 
  • Easy to make a custom branded app
  • Native performance with shared logic/UI
  • The community is growing fast
  • Release often and fast

Reasons to skip for now

 
  • Already have a big app written with something else
  • Want to stick with Web no matter what
  • Hate being at the beginning of big things
  • Need a super low-level app
  • Games

Questions?

James Brinkerhoff

james@devengage.io

Twitter: @th3brink

Need a consultant or trainer?

Catch Up Later

Made with Slides.com