Flutter for Android devs

3be52a14c8c58209263d7f83204b8dc7?s=47 Rui Kowase
April 13, 2018

Flutter for Android devs

3be52a14c8c58209263d7f83204b8dc7?s=128

Rui Kowase

April 13, 2018
Tweet

Transcript

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

  2. Profile • Name: Rui Kowase / 小和瀬 塁 • Account:

    @rkowase 2 Skill: Flutter, Android, etc...
  3. What’s Flutter Flutter makes it easy and fast to build

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

  5. Develop & Release flow 5 Develop Build Release Setup

  6. Develop & Release flow 6 Develop Build Release Setup

  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/
  8. Get Started: Configure Editor • Install Flutter plugin (Preferences >

    Plugins > Browse repositories) • Restart Android Studio https://flutter.io/get-started/editor/
  9. Flutter Documentation 9 https://flutter.io/docs/

  10. Flutter Documentation for Web / Android / React Native devs

    10 https://flutter.io/docs/
  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/
  12. Develop & Release flow 12 Develop Build Release Setup

  13. Layout • View • AppBar • Animation • Alignment •

    Padding, Margin • etc... Widget
  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/
  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
  16. Intent void main() { runApp(new MaterialApp( home: new MyAppHome(), //

    becomes the route named '/' routes: <String, WidgetBuilder> { '/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');
  17. Async • AsyncTask • RxJava • Async/Await • RxDart

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

    3.0x xxxhdpi 4.0x
  19. Build time 1-5 min 1-5 sec

  20. Demo (Hot Reload)

  21. Develop & Release flow 21 Develop Build Release Setup

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

  23. Summary • Official Documents • Official Widgets • Multi Platform

    • IDE Support • Hot Reload
  24. Appendix 24

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

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