Flutter Overview - DevFest Tokyo 2018

Transcript

1. Flutter Overview Rui Kowase @rkowase 2018/09/01 DevFest Tokyo 2018
2. Profile • Name: Rui Kowase / 小和瀬 塁 • Account: @rkowase Skill: Flutter, Android, etc...
3. What’s Flutter
4. What’s Flutter Flutter makes it easy and fast to build beautiful mobile apps. https://github.com/flutter/flutter
5. Dart • A client-optimized language • Rich & powerful frameworks • Delightful & flexible tooling https://www.dartlang.org/
6. 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/
7. Fast Development & Expressive, beautiful UIs https://flutter.io/
8. Flutter Gallery
9. Hot Reload
10. Flutter Documentation https://flutter.io/docs/
11. 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
12. Flutter System Architecture https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit
13. Dev Flow
14. Develop & Release flow 14 Develop Build Release Setup
15. Develop & Release flow 15 Develop Build Release Setup
16. 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/
17. 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/
18. Get Started: Configure Editor • Install Flutter plugin (Preferences > Plugins > Browse repositories) • Restart Android Studio https://flutter.io/get-started/editor/
19. Develop & Release flow 19 Develop Build Release Setup
20. Project structure
21. Project structure Native Dart Config
22. 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/
23. 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
24. 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/
25. 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/
26. 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/
27. Widgets Catalog
28. Cookbook
29. Flutter Packages
30. Develop & Release flow 30 Develop Build Release Setup
31. 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
32. 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
33. Continuous Delivery support
34. Continuous Delivery support
35. Google I/O 2018
36. Summary • Material Design Flutter • Firebase Flutter • Reactive Framework ⚡
37. Material Design (io18)
38. Material Design Flutter
39. Material Design Roadmap https://github.com/material-compone nts/material-components/blob/develo p/ROADMAP.md
40. 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
41. Firebase (io18)
42. Firebase Integration https://www.youtube.com/watch?v=8wQ_MorYCEk
43. Available FlutterFire plugins https://github.com/flutter/plugins/blob/master/FlutterFire.md
44. How to integrate 1. Signed up for a Firebase account 2. Create a Firebase project 3. Platform-specific Firebase configuration ◦ Configure iOS ◦ Configure Android
45. Configure Flutter Plugin for iOS
46. Configure Flutter Plugin for Android
47. Getting started with Firebase and Flutter https://firebase.google.com/docs/flutter/setup
48. Flutter (io18)
49. RxDart & StreamBuilder https://www.youtube.com/watch?v=RS36gBEp8OI
50. 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
51. GitHub stars of Flutter repository https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a Beta 1 Google I/O
52. Codelabs
53. Flutter Codelabs
54. Flutterコードラボ by @najeira https://gist.github.com/najeira/4ea8c4ca93570dfb1468fae5c8d6c616
55. Flutter events around the world https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a
56. Flutter Japan User Group / Flutter Meetup Tokyo https://flutter-jp.connpass.com/event/90790/
57. Dash is Kawaii