$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

  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/