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

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

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

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

Develop & Release flow 5 Develop Build Release Setup

Develop & Release flow 6 Develop Build Release Setup

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/

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

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

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

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/

Develop & Release flow 12 Develop Build Release Setup

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

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/

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

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');

Async ● AsyncTask ● RxJava ● Async/Await ● RxDart

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

Build time 1-5 min 1-5 sec

Demo (Hot Reload)

Develop & Release flow 21 Develop Build Release Setup

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

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

Appendix 24

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

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