#udacity #flutterstudyjam #nyc

Review Content

Complete Projects

Share

Insights

Flutter Study Jam

NYC Kickoff
September 10, 2018


Slides
jams18-kickoff.flutter.fyi

#FlutterStudyJam

Build Mobile Native Apps With Flutter

Sep10 - Oct 1

Open

Study Hours

04:00pm - 06:00pm

Flutter Codelabs /
Self-Guided

Machine Learning
Crash Course /
Self-Guided


Flutter Udacity Course /
StudyJam Early Start

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Study Time Options

Machine Learning
Crash Course | site

Google Cloud Specialization
(Coursera / ML with TensorFlow) | site

Google Developers Codelabs
(Udacity / Flutter) | site

Build Native Mobile
Apps with Flutter | site

Or .. get a jumpstart on FlutterStudyJam

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Sep 10, 2018 https://studyjams.flutter.camp

Sachin Kotwani
@skotwani | PM, Google

Firebase MLKit:
A Machine Learning SDK for Mobile Devs

Nitya Narasimhan

Martin Rybak
@nitya | @martin_rybak

Flutter Study Jams Kickoff:
Flutter Framework & Building Interactive Apps

7:00-8:00pm

6:30-7:00pm

4:00-6:00pm

Quiet Study Time

#FlutterStudyJam

Build Mobile Native Apps With Flutter

Sep10 - Oct 1

Flutter Showcase

https://www.meetup.com/flutter-nyc/events/252631332/

Don’t forget to RSVP for the Oct 1 Showcase on the Flutter NYC site

Firebase

& Flutter

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Please join the Slack today

Firebase

& Flutter

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

06:00pm - 06:30pm

Announcements /
Community

Study Jams Welcome /
Nitya Narasimhan
Martin Rybak

Firebase

& Flutter

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

We’re Hiring!

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Strata

Conf Discount

https://conferences.oreilly.com/strata/strata-ny

Use promo UGNYGDG for 20% off on most passes

Plus: 20 FREE EXPO PASSES (Sep 10 Raffle)

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Flutter Course Discount

Get the $150 course for just $10 with this link: http://bit.ly/udemy-flutter-gdgnyc

Plus: 5 FREE PASSES (Oct 1 Raffle)

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Flutter Course Discount

Get the $200 course for just $13 with this link: couponCode=FLUTTERFYI_P

Plus: 5 FREE PASSES (Oct 1 Raffle)

Or $12 today

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Raffle

Dash Plushie

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

06:30pm - 07:00pm

Firebase MLKit /
Sachin Kotwani

Firebase

ML Kit

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Sachin

Kotwani

Firebase ML KIt

Program Manager

Google

ML Kit: SDK for mobile developers

Machine learning (ML) on Firebase allows you to harness the power of ML without needing

to be an expert in it.

Leverage powerful but simple-to-use image recognition capabilities across a set of on-device & cloud-based APIs, or for the more adventurous, upload your own custom on-device model.

07:00pm - 08:30pm

Flutter Kickoff /
Nitya Narasimhan
Martin Rybak

Flutter Study Jam

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Study Jams Process

  • Setup / Install Flutter, Join Slack
  • Learn / Lessons recaps ( L1 & L2 )
  • Start / Work through a codelab
  • Check-in / Weekly Slack Office Hrs
  • Finish / Watch videos, do project

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Nitya

Narasimhan

GDE Flutter
GDG NYC Organizer

Flutter StudyJam Mentor

The Flutter Framework

The goal of Flutter Study Jam is to work together as a community to complete the Udacity course.


In Lesson 1
Understand the fundamentals of the Flutter framework, incorporate widgets and state in your app, and use Flutter’s tools to enhance your development process.

Lesson 1: The Flutter Framework / Udacity UD905

  • Hello Rectangle
  • Explore Widgets
  • Category Widget
  • Unit Converter
  • Design Layout
  • Navigation
  • Debug Stateful
  • Make Stateful

Contents

Quizzes

  • Why Flutter?
  • Why Dart?
  • Reactive Framework
  • Development Tools
  • Scaffold First App
  • Widgets & Layouts
  • Navigation
  • Stateful Widgets

Slides

oscon18.flutter.fyi

dcnyc18.flutter.fyi

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Why Flutter?

https://flutter.io

Currently Release Preview 1

  • Fully Open Source
    Google-maintained
  • Reactive mobile UI
    Modern framework
  • Multi-platform
    Native Android + iOS
  • Unified codebase
    Dartlang, Extensible via plugins
  • Performant UX
    AOT compilation,
    60fps render
  • High Velocity DX
    JIT compilation
    Stateful hot reload
  • Rich Tools, Integration
    IDEs, Inspector, Profiling,
    Flutter-Fire plugin

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Why Flutter?

Beautiful Apps

Performant UX
Flutter Gallery Demo

Record Time

Performant DX
Hot Reload Demo

Fast, smooth transitions / Custom shapes & paths / 60fps rendering

Stateful hot reload with JIT / Tooling & CLI / Unified codebase

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Scaffold
First App

Flutter CLI & Hot Reload

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Why
Dart?

Object-Oriented
Strongly-Typed Familiar Syntax
Reuseable Packages

AOT / ARM code

JIT / Hot reload
Tree-Shaking
(compiler)

Generational Garbage Collector (fast render)

”Why Flutter Uses Dart:
Wm Leler, Flutter Team / Hackernoon Article

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Developmnt
Tools

Flutter Inspector

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Developer
Tools

Flutter CLI / Doctor

analyze Analyze the project's Dart code.

build Flutter build commands.

channel List or switch flutter channels.

clean Delete the build/ directory.

config Configure Flutter settings.

create Create a new Flutter project.

devices List all connected devices.

doctor Show information about the installed tooling.

drive Runs Flutter Driver tests for the current project.

emulators List and launch available emulators.

format Format one or more dart files.

fuchsia_reload Hot reload on Fuchsia.

help Display help information for flutter.

install Install a Flutter app on an attached device.

logs Show log output for running Flutter apps.

packages Commands for managing Flutter packages.

precache Populates the Flutter tool's cache of binary artifacts.

run Run your Flutter app on an attached device.

screenshot Take a screenshot from a connected device.

stop Stop your Flutter app on an attached device.

test Run Flutter unit tests for the current project.

trace Start and stop tracing for a running Flutter app.

upgrade Upgrade your copy of Flutter.

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Fast Render, No Bridges

Modern
Reactive Framework

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Born Multi-Platform

Modern
Reactive Framework

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Layered Architecture

Modern
Reactive Framework

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

App as ‘tree of widgets’

Widgets
& Layouts

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Widget Catalog

Reuse before build

Documentation is key

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Layout Widgets

size & positioning
(wrap-and-roll)

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Navigation

“Route” is a widget that ‘navigates’ to a screen. Familiar to web devs

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Navigation

Navigator can “push” a route to make related view appear onscreen

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Navigation

Navigator can “pop” a route to expose the screen for prior route

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Navigation

navigate to a new
screen & back

// Within the `FirstScreen`
Widget onPressed: () {
Navigator
.push(
context
,
MaterialPageRoute(
builder: (context) =>
SecondScreen()),
);
}

// Within the `SecondScreen`
Widget onPressed: () {
Navigator
.pop(context);
}

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Navigation

Send data to a
new screen

ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title),
// When a user taps on the ListTile
// navigate to the DetailScreen.

// Notice that we're not only creating
// a DetailScreen, we're also passing

// the current todo to it!
onTap: () {
Navigator
.push(
context
,
MaterialPageRoute(
builder
: (context) =>
DetailScreen(
todo: todos[index]),
),
);
},
);
},
);

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

App as ‘tree of widgets’

Widgets
& Layouts

StatefulWidgets
have a persistent
State object

setState ⇒ trigger rebuild

StatelessWidgets
are immutable
no state ⇒ no triggering rebuilds

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Widget, State & Context

BuildContext

reference to location
of widget within widget tree..
is unique to each widget even if widget relocates in tree

use it to locate ancestor (parent) or descendant (child) contexts

Stateless

Builds using only configuration information (think props)

Stateful

Builds using configuration (props) and internal (state).
State is anchored to context

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Stateless
& Stateful

StatefulWidgets
new State object
per BuildContext

StatelessWidgets
can build in different BuildContexts

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Stateless
& Stateful

didUpdateWidget

.. it receives a new configuration

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

  • Hello Rectangle
  • Explore Widgets
  • Category Widget
  • Unit Converter
  • Design Layout
  • Navigation
  • Debug Stateful
  • Make Stateful

Contents

Quizzes

  • Why Flutter?
  • Why Dart?
  • Reactive Framework
  • Development Tools
  • Scaffold First App
  • Widgets & Layouts
  • Navigation
  • Stateful Widgets

Slides

oscon18.flutter.fyi

dcnyc18.flutter.fyi

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Quiz Outcomes

Scaffold, then layout

Unit Converter
Starting Point: Map out app

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Quiz Outcomes

Scaffold, then layout

Unit Converter
Design Customizations

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Quiz Outcomes

custom category widget

Unit Converter
Build Custom Widget / 02_category

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 1: The Flutter Framework / Udacity UD905

Quiz Outcomes

1 / Hello Rectangle
Scaffold Your First App

5 / Unit Converter
Solution: 05_stateful

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Martin

Rybak

Director of Mobile @ Convene

Flutter NYC Meetup Organizer

Flutter StudyJam Mentor

Building Interactive Apps

The goal of Flutter Study Jam is to work together as a community to complete the Udacity course.


In Lesson 2
Customize your app with Material design themes, assets and more. Make your app interactive, and retrieve local and real-time data from the web.

Lesson 2: Building Interactive Apps / Udacity UD905

Lesson 2: Building Interactive Apps

  • Material Design
    What’s new in 2.0
  • User Interaction
    Text Input & Gestures
  • External Resources
    Packages, Plugins, Images, Fonts
  • Asynchronous Programming
    Futures, Async/Await, Error Handling

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Material Design

What is Material Design? You might remember it as something like this. A well thought-through system of UI components, but one that made all apps have the same generic look and feel.

Google recognized this, and put a TON of user research into this. Here’s what they came up with (video).

Lesson 2: Building Interactive Apps / Udacity UD905

Material Design 2.0

  • Inspired by paper and ink
  • Not a single style
  • Embraces custom colors, shapes, icons, fonts
  • Build beautiful, usable products faster

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Your app can (and should) look and feel unique.

Material Design 2.0

Material Theme Editor: Sketch plugin to experiment with color, shape, and typography.

Material Design 2.0

Color Tool: Browser tool to pick a palette of colors that is Hierarchical, Legible, and Expressive, even for users with low vision.

Material Design 2.

This is all great for Flutter users because Flutter loves Material Design, and vice versa.

Flutter comes with a huge set of material design widgets to keep you from having to reinvent the wheel, including 900 icons that you can use in buttons and elsewhere.

Material Design 2.

Material widgets can look and feel different on iOS and Android. Here, you can see the AppBar widget looks different on both platforms. This is because there is code inside that widget that checks the current platform. Your widgets can do the same, or they can look exactly the same on both; it’s up to you.

@override

Widget build(BuildContext context)

{

var platform = Theme.of(context).platform;

switch (platform) {

case TargetPlatform.android:

return new CircularProgressIndicator();

case TargetPlatform.iOS:

return new CupertinoActivityIndicator();

default:

return null;

}

}

Here’s how to check the current platform in your Flutter app. In this example, we use a switch statement to return the appropriate busy spinner for the given platform.

@override

Widget build(BuildContext context)

{

var orientation = MediaQuery.of(context).orientation;

if (orientation == Orientation.landscape) {

return new GridView(...);

} else {

return new ListView(...);

}

}

Here’s how to perform conditional rendering based on whether your device is in portrait or landscape. Your widget will automatically be rebuilt when the phone is rotated. In this example, we are returning a GridView in landscape and a ListView in portrait. You can also you a widget called OrientationBuilder to make this slightly easier.

Finally, you don’t need to use the Material widgets at all in your app. For example you can use the Cupertino widgets which look just like native iOS’ UIKit. Or you can just roll your own 100% custom widgets.

Lesson 2: Building Interactive Apps / Udacity UD905

Material Design

  • Flutter loves Material Design.
  • Material widgets prevent you from reinventing the wheel.
  • Widgets can look different on iOS and Android.
  • You don’t have to use Material widgets.

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Lesson 2: Building Interactive Apps / Udacity UD905

User Interaction

  • Text Input
  • Gestures

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Text fields are one of the most important means that users will use to interact with your app. Here are some of the different styles you can create out of the box in Flutter.

@override

Widget build(BuildContext context)

{

return new TextField(

keyboardType: TextInputType.emailAddress,

style: const TextStyle(

fontSize: 36.0,

),

decoration: const InputDecoration(

hintText: 'Email',

),

onChanged: (text) => print(text),

);

}

Here’s how to create a text field in Flutter. Notice the use of composition over inheritance. The style property is set to a TextStyle widget, and the decoration property is set to an InputDecoration object.

To get data from the text field, we use the onChanged event handler. In this example, we print the current value of the text field to the console.

You can also do much more such as validation, updating the value of the text field programmatically, and grouping multiple fields using a Form widget.

Watch out for pixel overflow! When working with multiple text fields, make sure your app will render correctly on smaller devices once the keyboard appears. Do this by putting your fields into a scrollable view, such as a ListView or SingleChildScrollView.

Raw Touch Events

GestureDetector

PointerDownEvent

PointerMoveEvent

PointerUpEvent

PointerCancelEvent

onTap

onDoubleTap

onLongPress

onPan

onScale

onVerticalDrag

onHorizontalDrag

Flutter gives you access to raw touch events, but also offers a widget called a GestureDetector that provides a higher level of abstraction.

@override

Widget build(BuildContext context)

{

return new GestureDetector(

child: const Text('Tap Me'),

onTap: () => print('I was tapped!')

);

}

You can wrap any widget with a GestureDetector widget to enable user interaction. In this simple example, we wrap a Text widget with a GestureDetector so it prints to the console whenever it is touched. In Flutter, it is extremely easy to add user interactivity to any widget.

Lesson 2: Building Interactive Apps / Udacity UD905

External Resources

  • Packages
  • Plugins
  • Images
  • Fonts

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

At some point you will want to add external resources to app, whether it be outside code, or custom fonts and images. Outside code is usually provided in the form of a package.

A package is a library of functions that can be shared easily. There are plenty of open-source packages available online, but you can also make your own.

Packages that interface with the native platform API’s are called plugins.

name: Demo

description: A new Flutter project.

dependencies:

flutter:

sdk: flutter

decimal: ^0.3.0

intl: ^0.15.6

async: ^2.0.6

crypto: ^2.0.2+1

flutter_secure_storage: ^2.0.0

uuid: ^1.0.0

simple_moment:

git: https://github.com/rinukkusu/simple_moment

To add a package, simply update your pubspec.yaml at the root of your Flutter app.

What’s really cool is that even you import a large package, only the code that you actually use will be compiled into your binary. (Tree shaking)

Look for packages on pub.dartlang.org before you reinvent the wheel!

flutter:

assets:

- assets/logo.png

- assets/background.png

fonts:

- family: icons

fonts:

- asset: assets/fonts/icons.ttf

- family: DIN-Light

fonts:

- asset: assets/fonts/DIN-Light-Regular.otf

To add custom images and fonts to your app, also reference them in the pubspec.yaml file.

You will then be able to reference them by name inside your app.

The assets can also be shared with the underlying native platform.

Flutter can load resolution-appropriate images for the current device pixel ratio.

In this example, I created a custom icon font using an online tool called Fontello. That way they scale perfectly and I don’t have to worry about exporting them at various resolutions.

Lesson 2: Building Interactive Apps / Udacity UD905

Asynchronous Programming

  • Futures
  • Async/Await
  • Error Handling

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

I can hardly think of an app nowadays that does not communicate with a backend API of some sort. Since accessing the network is a time-consuming operation, and since Dart is single-threaded, it needs to be asynchronous so that our app can continue to run without freezing.

Dart uses Futures to represent asynchronous operations.

import 'dart:async';

import 'dart:io';

void foo()

{

var client = new HttpClient();

client

.getUrl(Uri.parse("http://www.example.com/"))

.then((request) => request.close())

.then((response) => print(response.statusCode))

.catchError((Object e) => print(e));

}

When you invoke an asynchronous function, the function immediately returns an uncompleted Future object.

Later, when the operation is finished, the Future object completes with the final value or with an error.

Here we are invoking the getUrl method on the HttpClient class, which returns a Future.

We can then set then and catchError handlers to handle the results of the Future.

import 'dart:async';

import 'dart:io';

void foo() async

{

var url = Uri.parse('http://www.example.com/');

var client = new HttpClient();

var request = await client.getUrl(url);

var response = await request.close();

print(response.statusCode);

}

However, one killer feature of Dart (as of version 1.9) is that you can use the async and await keywords to do this with much simpler code; code that looks synchronous. Here is the same code as before, but written without using any callbacks. Note that any function that calls await must have the async keyword. To catch errors, simply wrap the code in a try/catch block.

void main()

{

runZoned<Future>(() async {

runApp(new App());

}, onError: (Object error, StackTrace stackTrace) async {

print('Zone caught an error: $error, $stackTrace');

});

}

If there is no try/catch block, then the exception will bubble up. Here is how to catch the exception at the root of your app. Instead of just calling runApp with your root widget, call the runZoned function and provide an onError handler. In there you can log the exception to your analytics platform.

Study Jams Process

  • Setup / Install Flutter, Join Slack
  • Learn / Mentors recaps ( L1 & L2 )
  • Start / Work through a codelab
  • Check-in / Weekly Slack Office Hrs
  • Finish / Watch videos, do project

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

Interactive Codelab

The goal of Flutter Study Jam is to work together as a community to complete the Udacity course.


Let’s Validate our setup and work

through a simple Flutter codelab

Interactivly. Bring your

laptops & chargers

Nitya Narasimhan

Martin Rybak

Lesson 1: The Flutter Framework / Udacity UD905

Interactive Codelab Options

Flutter Tutorials
https://tutorials.flutter.fyi

Flutter Codelabs
https://codelabs.flutter.fyi

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp

#FlutterStudyJam

Follow
@flutterfyi

Join
flutter-camp