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
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/