#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
Flutter Slack
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
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
#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
Contents
Quizzes
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
#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
Didier Boelens Article / June 2018
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
Contents
Quizzes
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
#FlutterStudyJam
Follow�@flutterfyi
Join�flutter-camp
Material Design
Lesson 2: Building Interactive Apps / Udacity UD905
Material Design 2.0
#FlutterStudyJam
Follow�@flutterfyi
Join�flutter-camp
Material Design 2.0
Material Design 2.0
Material Design 2.
Material Design 2.
@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;
}
}
@override
Widget build(BuildContext context)
{
var orientation = MediaQuery.of(context).orientation;
if (orientation == Orientation.landscape) {
return new GridView(...);
} else {
return new ListView(...);
}
}
Lesson 2: Building Interactive Apps / Udacity UD905
Material Design
#FlutterStudyJam
Follow�@flutterfyi
Join�flutter-camp
Lesson 2: Building Interactive Apps / Udacity UD905
User Interaction
#FlutterStudyJam
Follow�@flutterfyi
Join�flutter-camp
@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),
);
}
Raw Touch Events
GestureDetector
PointerDownEvent
PointerMoveEvent
PointerUpEvent
PointerCancelEvent
onTap
onDoubleTap
onLongPress
onPan
onScale
onVerticalDrag
onHorizontalDrag
@override
Widget build(BuildContext context)
{
return new GestureDetector(
child: const Text('Tap Me'),
onTap: () => print('I was tapped!')
);
}
Lesson 2: Building Interactive Apps / Udacity UD905
External Resources
#FlutterStudyJam
Follow�@flutterfyi
Join�flutter-camp
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
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
Lesson 2: Building Interactive Apps / Udacity UD905
Asynchronous Programming
#FlutterStudyJam
Follow�@flutterfyi
Join�flutter-camp
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));
}
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);
}
void main()
{
runZoned<Future>(() async {
runApp(new App());
}, onError: (Object error, StackTrace stackTrace) async {
print('Zone caught an error: $error, $stackTrace');
});
}
Study Jams Process
#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