Flutter for Android devs

Google Slide version
https://docs.google.com/presentation/d/17OlnsIYIcEv0TbpDagrwX3FZcjpEQIMjshuXFudeJVI/edit?usp=sharing

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