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