Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Flutter Overview - DevFest Tokyo 2018

Rui Kowase
September 01, 2018

Flutter Overview - DevFest Tokyo 2018

Rui Kowase

September 01, 2018
Tweet

More Decks by Rui Kowase

Other Decks in Technology

Transcript

  1. Flutter Overview
    Rui Kowase
    @rkowase
    2018/09/01 DevFest Tokyo 2018

    View full-size slide

  2. Profile
    ● Name: Rui Kowase / 小和瀬 塁
    ● Account: @rkowase
    Skill: Flutter, Android, etc...

    View full-size slide

  3. What’s
    Flutter

    View full-size slide

  4. What’s Flutter
    Flutter makes it easy and fast to build beautiful mobile apps.
    https://github.com/flutter/flutter

    View full-size slide

  5. Dart
    ● A client-optimized language
    ● Rich & powerful frameworks
    ● Delightful & flexible tooling
    https://www.dartlang.org/

    View full-size slide

  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/

    View full-size slide

  7. Fast Development & Expressive, beautiful UIs
    https://flutter.io/

    View full-size slide

  8. Flutter Gallery

    View full-size slide

  9. Flutter Documentation
    https://flutter.io/docs/

    View full-size slide

  10. 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

    View full-size slide

  11. Flutter System Architecture
    https://docs.google.com/presentation/d/1cw7A4HbvM_Abv320rVgPVGiUP2msVs7tfGbkgdrTy0I/edit

    View full-size slide

  12. Develop & Release flow
    14
    Develop Build Release
    Setup

    View full-size slide

  13. Develop & Release flow
    15
    Develop Build Release
    Setup

    View full-size slide

  14. 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/

    View full-size slide

  15. 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/

    View full-size slide

  16. Get Started: Configure Editor
    ● Install Flutter plugin
    (Preferences > Plugins > Browse repositories)
    ● Restart Android Studio
    https://flutter.io/get-started/editor/

    View full-size slide

  17. Develop & Release flow
    19
    Develop Build Release
    Setup

    View full-size slide

  18. Project structure

    View full-size slide

  19. Project structure
    Native
    Dart
    Config

    View full-size slide

  20. 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/

    View full-size slide

  21. 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

    View full-size slide

  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/

    View full-size slide

  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/

    View full-size slide

  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/

    View full-size slide

  25. Widgets Catalog

    View full-size slide

  26. Flutter Packages

    View full-size slide

  27. Develop & Release flow
    30
    Develop Build Release
    Setup

    View full-size slide

  28. 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

    View full-size slide

  29. 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

    View full-size slide

  30. Continuous Delivery support

    View full-size slide

  31. Continuous Delivery support

    View full-size slide

  32. Google I/O
    2018

    View full-size slide

  33. Summary
    ● Material Design Flutter
    ● Firebase Flutter
    ● Reactive Framework ⚡

    View full-size slide

  34. Material
    Design
    (io18)

    View full-size slide

  35. Material Design Flutter

    View full-size slide

  36. Material Design
    Roadmap
    https://github.com/material-compone
    nts/material-components/blob/develo
    p/ROADMAP.md

    View full-size slide

  37. 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

    View full-size slide

  38. Firebase
    (io18)

    View full-size slide

  39. Firebase Integration
    https://www.youtube.com/watch?v=8wQ_MorYCEk

    View full-size slide

  40. Available FlutterFire plugins
    https://github.com/flutter/plugins/blob/master/FlutterFire.md

    View full-size slide

  41. How to integrate
    1. Signed up for a Firebase account
    2. Create a Firebase project
    3. Platform-specific Firebase configuration
    ○ Configure iOS
    ○ Configure Android

    View full-size slide

  42. Configure Flutter Plugin for iOS

    View full-size slide

  43. Configure Flutter Plugin for Android

    View full-size slide

  44. Getting started with Firebase and Flutter
    https://firebase.google.com/docs/flutter/setup

    View full-size slide

  45. Flutter
    (io18)

    View full-size slide

  46. RxDart & StreamBuilder
    https://www.youtube.com/watch?v=RS36gBEp8OI

    View full-size slide

  47. 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

    View full-size slide

  48. GitHub stars of Flutter repository
    https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a
    Beta 1
    Google I/O

    View full-size slide

  49. Flutter Codelabs

    View full-size slide

  50. Flutterコードラボ by @najeira
    https://gist.github.com/najeira/4ea8c4ca93570dfb1468fae5c8d6c616

    View full-size slide

  51. Flutter events around the world
    https://medium.com/flutter-io/flutter-release-preview-1-943a9b6ee65a

    View full-size slide

  52. Flutter Japan User Group / Flutter Meetup Tokyo
    https://flutter-jp.connpass.com/event/90790/

    View full-size slide

  53. Dash is Kawaii

    View full-size slide