<style>@import url(https://fonts.googleapis.com/css?kit=NzkxbebTgjMAsgBfnPMPySmCHCenGwfU93Xz-o9lDWxMyQWjmtolelDDgaM-TBiLr2sdai7ZFOAWFVSfGJbT-fQxwXl_zLnyDVuUMIZNTZE3Rb8Z_oJNy2XaBpG7K6Hrz5sOtDeOi5kWgJzJ0FqkWFp4P0ohLxYQERvq7_xC0iHZJ9ZoPixW_7tqGahRLvgo96xlbbE5D7Gw2o7jubnkMA);</style>

1 of 73

#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

2 of 73

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

3 of 73

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

4 of 73

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

5 of 73

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

6 of 73

Please join the Slack today

Firebase

& Flutter

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

7 of 73

06:00pm - 06:30pm

Announcements / �Community�

Study Jams Welcome / �Nitya Narasimhan �Martin Rybak

Firebase

& Flutter

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

8 of 73

We’re Hiring!

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

9 of 73

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

10 of 73

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

11 of 73

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

12 of 73

Raffle

Dash Plushie

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

13 of 73

06:30pm - 07:00pm

Firebase MLKit / �Sachin Kotwani�

Firebase

ML Kit

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

14 of 73

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.

15 of 73

07:00pm - 08:30pm

Flutter Kickoff / �Nitya Narasimhan �Martin Rybak

Flutter Study Jam

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

16 of 73

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

17 of 73

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.

18 of 73

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

19 of 73

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

20 of 73

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

21 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Scaffold �First App

Flutter CLI & Hot Reload

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

22 of 73

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

23 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Developmnt�Tools

Flutter Inspector

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

24 of 73

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

25 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Fast Render, No Bridges

Modern�Reactive Framework

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

26 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Born Multi-Platform

Modern�Reactive Framework

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

27 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Layered Architecture

Modern�Reactive Framework

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

28 of 73

Lesson 1: The Flutter Framework / Udacity UD905

App as ‘tree of widgets’

Widgets �& Layouts

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

29 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Widget Catalog

Reuse before build

Documentation is key

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

30 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Layout Widgets

size & positioning�(wrap-and-roll)

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

31 of 73

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

32 of 73

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

33 of 73

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

34 of 73

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

35 of 73

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

36 of 73

Lesson 1: The Flutter Framework / Udacity UD905

App as ‘tree of widgets’

Widgets �& Layouts

StatefulWidgets �have a persistent �State objectsetState ⇒ trigger rebuild

StatelessWidgets �are immutableno state ⇒ no triggering rebuilds

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

37 of 73

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

38 of 73

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

39 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Stateless �& Stateful

didUpdateWidget

.. it receives a new configuration

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

40 of 73

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

41 of 73

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

42 of 73

Lesson 1: The Flutter Framework / Udacity UD905

Quiz Outcomes

Scaffold, then layout

Unit Converter�Design Customizations

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

43 of 73

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

44 of 73

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

45 of 73

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.

46 of 73

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

47 of 73

Material Design

48 of 73

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

49 of 73

Material Design 2.0

50 of 73

Material Design 2.0

51 of 73

Material Design 2.

52 of 73

Material Design 2.

53 of 73

@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;

}

}

54 of 73

@override

Widget build(BuildContext context)

{

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

if (orientation == Orientation.landscape) {

return new GridView(...);

} else {

return new ListView(...);

}

}

55 of 73

56 of 73

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

57 of 73

Lesson 2: Building Interactive Apps / Udacity UD905

User Interaction

  • Text Input
  • Gestures

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

58 of 73

59 of 73

@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),

);

}

60 of 73

61 of 73

Raw Touch Events

GestureDetector

PointerDownEvent

PointerMoveEvent

PointerUpEvent

PointerCancelEvent

onTap

onDoubleTap

onLongPress

onPan

onScale

onVerticalDrag

onHorizontalDrag

62 of 73

@override

Widget build(BuildContext context)

{

return new GestureDetector(

child: const Text('Tap Me'),

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

);

}

63 of 73

Lesson 2: Building Interactive Apps / Udacity UD905

External Resources

  • Packages
  • Plugins
  • Images
  • Fonts

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

64 of 73

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

65 of 73

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

66 of 73

Lesson 2: Building Interactive Apps / Udacity UD905

Asynchronous Programming

  • Futures
  • Async/Await
  • Error Handling

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp

67 of 73

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));

}

68 of 73

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);

}

69 of 73

void main()

{

runZoned<Future>(() async {

runApp(new App());

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

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

});

}

70 of 73

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

71 of 73

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

72 of 73

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

73 of 73

#FlutterStudyJam

Follow�@flutterfyi

Join�flutter-camp