Slide 1
Slide 1 text
Flutter Overview
Rui Kowase
@rkowase
2018/09/01 DevFest Tokyo 2018
Slide 2
Slide 2 text
Profile
● Name: Rui Kowase / 小和瀬 塁
● Account: @rkowase
Skill: Flutter, Android, etc...
Slide 3
Slide 3 text
What’s
Flutter
Slide 4
Slide 4 text
What’s Flutter
Flutter makes it easy and fast to build beautiful mobile apps.
https://github.com/flutter/flutter
Slide 5
Slide 5 text
Dart
● A client-optimized language
● Rich & powerful frameworks
● Delightful & flexible tooling
https://www.dartlang.org/
Slide 6
Slide 6 text
Feature
● Build beautiful native apps in record time
● Fast development
● Expressive, beautiful UIs
● Modern, reactive framework
● Access native features and SDKs
● Unified app development
https://flutter.io/
Slide 7
Slide 7 text
Fast Development & Expressive, beautiful UIs
https://flutter.io/
Slide 8
Slide 8 text
Flutter Gallery
Slide 9
Slide 9 text
Hot Reload
Slide 10
Slide 10 text
Flutter Documentation
https://flutter.io/docs/
Slide 11
Slide 11 text
Flutter Documentation
https://flutter.io/docs/
Flutter for Web devs
Flutter for Android devs
Flutter for iOS devs
Flutter for React Native devs
Flutter for Xamarin.Forms devs
Slide 12
Slide 12 text
Flutter System Architecture
https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit
Slide 13
Slide 13 text
Dev Flow
Slide 14
Slide 14 text
Develop & Release flow
14
Develop Build Release
Setup
Slide 15
Slide 15 text
Develop & Release flow
15
Develop Build Release
Setup
Slide 16
Slide 16 text
Get Started: Install
1. Get the Flutter SDK
a. Download Flutter SDK
b. Extract the file
c. Add the flutter tool to your path
2. Run flutter doctor
https://flutter.io/setup-macos/
Slide 17
Slide 17 text
Get Started: flutter doctor
$ flutter doctor
...
[-] Android toolchain - develop for Android devices
• Android SDK at /Users/obiwan/Library/Android/sdk
✗ Android SDK is missing command line tools; download from
https://goo.gl/XxQghQ
• Try re-installing or updating your Android SDK,
visit https://flutter.io/setup/#android-setup for detailed instructions.
https://flutter.io/setup-macos/
Slide 18
Slide 18 text
Get Started: Configure Editor
● Install Flutter plugin
(Preferences > Plugins > Browse repositories)
● Restart Android Studio
https://flutter.io/get-started/editor/
Slide 19
Slide 19 text
Develop & Release flow
19
Develop Build Release
Setup
Slide 20
Slide 20 text
Project structure
Slide 21
Slide 21 text
Project structure
Native
Dart
Config
Slide 22
Slide 22 text
Hello World
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
} https://flutter.io/get-started/codelab/
Slide 23
Slide 23 text
Hello World
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
} https://flutter.io/get-started/codelab/
Immutable
Slide 24
Slide 24 text
Hello World
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
} https://flutter.io/get-started/codelab/
Slide 25
Slide 25 text
Hello World
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
} https://flutter.io/get-started/codelab/
Slide 26
Slide 26 text
Hello World
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
child: Text('Hello World'),
),
),
);
}
} https://flutter.io/get-started/codelab/
Slide 27
Slide 27 text
Widgets Catalog
Slide 28
Slide 28 text
Cookbook
Slide 29
Slide 29 text
Flutter Packages
Slide 30
Slide 30 text
Develop & Release flow
30
Develop Build Release
Setup
Slide 31
Slide 31 text
Preparing an Android App for Release
1. Review the App Manifest
2. Review the build configuration
3. Adding a Launcher icon
4. Signing the app
5. Enabling Proguard
6. Building a release APK
7. Publishing an APK to the Google Play Store
Slide 32
Slide 32 text
Preparing an iOS App for Release
1. Register your app on iTunes Connect
2. Review Xcode project settings
3. Add an App Icon
4. Create a build archive
5. Release your app on TestFlight
6. Release your app to the App Store
Slide 33
Slide 33 text
Continuous Delivery support
Slide 34
Slide 34 text
Continuous Delivery support
Slide 35
Slide 35 text
Google I/O
2018
Slide 36
Slide 36 text
Summary
● Material Design Flutter
● Firebase Flutter
● Reactive Framework ⚡
Slide 37
Slide 37 text
Material
Design
(io18)
Slide 38
Slide 38 text
Material Design Flutter
Slide 39
Slide 39 text
Material Design
Roadmap
https://github.com/material-compone
nts/material-components/blob/develo
p/ROADMAP.md
Slide 40
Slide 40 text
Material Components Support (July 2018)
Android
(1.0.0-alph
a1)
iOS
(55.0.2)
Web
(0.35.1)
Flutter
(Beta 3)
Color theme
components
8 / 16 12 / 16 9 / 16 16 / 16
Type theme
components
7 / 10 9 / 10 5 / 10 10 / 10
Expanded
set
of
components
1 / 3 2 / 3 0 / 3 3 / 3
Shape
parameter
0 / 2 2 / 2 2 / 2 2 / 2
https://github.com/material-components/material-components/blob/develop/ROADMAP.md
Slide 41
Slide 41 text
Firebase
(io18)
Slide 42
Slide 42 text
Firebase Integration
https://www.youtube.com/watch?v=8wQ_MorYCEk
Slide 43
Slide 43 text
Available FlutterFire plugins
https://github.com/flutter/plugins/blob/master/FlutterFire.md
Slide 44
Slide 44 text
How to integrate
1. Signed up for a Firebase account
2. Create a Firebase project
3. Platform-specific Firebase configuration
○ Configure iOS
○ Configure Android
Slide 45
Slide 45 text
Configure Flutter Plugin for iOS
Slide 46
Slide 46 text
Configure Flutter Plugin for Android
Slide 47
Slide 47 text
Getting started with Firebase and Flutter
https://firebase.google.com/docs/flutter/setup
Slide 48
Slide 48 text
Flutter
(io18)
Slide 49
Slide 49 text
RxDart & StreamBuilder
https://www.youtube.com/watch?v=RS36gBEp8OI
Slide 50
Slide 50 text
Flutter sessions
● Flutter & Design
○ Customize Material Components for your product
○ Build great Material Design products across platforms
○ Code beautiful UI with Flutter and Material Design
● Flutter & Firebase
○ Total mobile development made fun with Flutter and Firebase
○ Add Firebase to your cross-platform React Native or Flutter app
● Flutter
○ Build reactive mobile apps with Flutter
https://events.google.com/io/schedule/?section=may-8&topic=flutter&type=sessions
Slide 51
Slide 51 text
GitHub stars of Flutter repository
https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a
Beta 1
Google I/O
Slide 52
Slide 52 text
Codelabs
Slide 53
Slide 53 text
Flutter Codelabs
Slide 54
Slide 54 text
Flutterコードラボ by @najeira
https://gist.github.com/najeira/4ea8c4ca93570dfb1468fae5c8d6c616
Slide 55
Slide 55 text
Flutter events around the world
https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a
Slide 56
Slide 56 text
Flutter Japan User Group / Flutter Meetup Tokyo
https://flutter-jp.connpass.com/event/90790/
Slide 57
Slide 57 text
Dash is Kawaii