Flutter Overview - DevFest Tokyo 2018

3be52a14c8c58209263d7f83204b8dc7?s=47 Rui Kowase
September 01, 2018

Flutter Overview - DevFest Tokyo 2018

3be52a14c8c58209263d7f83204b8dc7?s=128

Rui Kowase

September 01, 2018
Tweet

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