#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
#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
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
#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
#FlutterStudyJam
Follow
@flutterfyi
Join
flutter-camp
Lesson 2: Building Interactive Apps / Udacity UD905
User Interaction
#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
#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
#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
#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