Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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. Profile • Name: Rui Kowase / 小和瀬 塁 • Account:

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

    beautiful mobile apps. https://github.com/flutter/flutter
  3. 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/
  4. Get Started: Configure Editor • Install Flutter plugin (Preferences >

    Plugins > Browse repositories) • Restart Android Studio https://flutter.io/get-started/editor/
  5. 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/
  6. 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/
  7. 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
  8. 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');