$30 off During Our Annual Pro Sale. View Details »

Flutter for Android devs

Rui Kowase
April 13, 2018

Flutter for Android devs

Rui Kowase

April 13, 2018
Tweet

More Decks by Rui Kowase

Other Decks in Technology

Transcript

  1. for Android devs
    Rui Kowase
    @rkowase
    2018/04/13 shibuya.apk #24

    View Slide

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

    View Slide

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

    View Slide

  4. Google I/O sessions
    1 Session 6 Sessions
    x6
    https://events.google.com/io/schedule/?section=may-8&topic=flutter&type=sessions

    View Slide

  5. Develop & Release flow
    5
    Develop Build Release
    Setup

    View Slide

  6. Develop & Release flow
    6
    Develop Build Release
    Setup

    View Slide

  7. Get Started: Install on macOS
    $ unzip ~/Downloads/flutter_macos_v0.2.8-beta.zip
    $ export PATH=`pwd`/flutter/bin:$PATH
    $ flutter doctor
    https://flutter.io/setup-macos/

    View Slide

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

    View Slide

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

    View Slide

  10. Flutter Documentation for Web / Android / React Native devs
    10
    https://flutter.io/docs/

    View Slide

  11. Flutter for Android Developers
    ● Views
    ○ What is the equivalent of a View in Flutter?
    ○ How do I update Widgets?
    ○ How do I layout my Widgets? Where is my XML layout file?
    ○ How do I add or remove a component from my layout?
    ○ In Android, I can animate a view by calling animate(); how do I
    animate a Widget?
    ○ How do I use a Canvas to draw/paint?
    ○ How do I build custom widgets?
    ● Intents
    ○ What is the equivalent of an Intent in Flutter?
    ○ How do I handle incoming intents from external applications in
    Flutter?
    ○ What is the equivalent of startActivityForResult()
    ?
    ● Async UI
    ○ What is the equivalent of runOnUiThread() in Flutter?
    ○ How do you move work to a background thread?
    ○ What is the equivalent of OkHttp on Flutter?
    ○ How do I show the progress for a long-running task in Flutter?
    ● Project Structure & Resources
    ○ Where do I store my resolution dependent image files?
    ○ Where do I store strings? How do I handle localization?
    ○ What is the equivalent of a Gradle file? How do I add
    dependencies?
    ● Layouts
    ○ What is the equivalent of a LinearLayout
    ○ What is the equivalent of a RelativeLayout
    ○ What is the equivalent of a ScrollView
    ● Gesture Detection and Touch Event Handling
    ○ How do I add an onClick listener to a widget in Flutter
    ○ How do I handle other gestures on widgets
    ● Listviews & Adapters
    ○ What is the alternative to a ListView in Flutter
    ○ How do I know which list item is clicked on
    ○ How do I update ListView’s dynamically
    ● Working with Text
    ○ How do I set custom fonts on my Text widgets
    ○ How do I style my Text widgets
    ● Form Input
    ○ What is the equivalent of a “hint” on an Input
    ○ How do I show validation errors
    ● Flutter Plugins
    ○ How do I access the GPS sensor
    ○ How do I access the Camera
    ○ How do I log in with Facebook
    ○ How do I build my own custom native integrations
    ○ How do I use the NDK in my Flutter application
    https://flutter.io/flutter-for-android/

    View Slide

  12. Develop & Release flow
    12
    Develop Build Release
    Setup

    View Slide

  13. Layout
    ● View
    ● AppBar
    ● Animation
    ● Alignment
    ● Padding, Margin
    ● etc...
    Widget

    View Slide

  14. Hello World
    import 'package:flutter/material.dart';
    void main() => runApp(new MyApp());
    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Welcome to Flutter',
    home: new Scaffold(
    appBar: new AppBar(
    title: new Text('Welcome to Flutter'),
    ),
    body: new Center(
    child: new Text('Hello World'),
    ),
    ),
    );
    }
    }
    https://flutter.io/get-started/codelab/

    View Slide

  15. Hello World
    import 'package:flutter/material.dart';
    void main() => runApp(new MyApp());
    class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
    return new MaterialApp(
    title: 'Welcome to Flutter',
    home: new Scaffold(
    appBar: new AppBar(
    title: new Text('Welcome to Flutter'),
    ),
    body: new Center(
    child: new Text('Hello World'),
    ),
    ),
    );
    }
    }
    https://flutter.io/get-started/codelab/
    Immutable

    View Slide

  16. Intent
    void main() {
    runApp(new MaterialApp(
    home: new MyAppHome(), // becomes the route named '/'
    routes: {
    '/a': (BuildContext context) => new MyPage(title: 'page A'),
    '/b': (BuildContext context) => new MyPage(title: 'page B'),
    '/c': (BuildContext context) => new MyPage(title: 'page C'),
    },
    ));
    }
    Navigator.of(context).pushNamed('/b');

    View Slide

  17. Async
    ● AsyncTask
    ● RxJava
    ● Async/Await
    ● RxDart

    View Slide

  18. Resource
    ldpi 0.75x
    mdpi 1.0x
    hdpi 1.5x
    xhdpi 2.0x
    xxhdpi 3.0x
    xxxhdpi 4.0x

    View Slide

  19. Build time
    1-5 min 1-5 sec

    View Slide

  20. Demo (Hot Reload)

    View Slide

  21. Develop & Release flow
    21
    Develop Build Release
    Setup

    View Slide

  22. Presentation
    https://speakerdeck.com/rkowase/release-flutter-app

    View Slide

  23. Summary
    ● Official Documents
    ● Official Widgets
    ● Multi Platform
    ● IDE Support
    ● Hot Reload

    View Slide

  24. Appendix
    24

    View Slide

  25. Presentation
    https://speakerdeck.com/rkowase/try-flutter 25

    View Slide

  26. Flutter Meetup Tokyo
    https://flutter-jp.connpass.com/event/84436/

    View Slide