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

Flutter Overview - DevFest Tokyo 2018

Rui Kowase
September 01, 2018

Flutter Overview - DevFest Tokyo 2018

Rui Kowase

September 01, 2018
Tweet

More Decks by Rui Kowase

Other Decks in Technology

Transcript

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

    @rkowase 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. Dart • A client-optimized language • Rich & powerful frameworks

    • Delightful & flexible tooling https://www.dartlang.org/
  4. Feature • Build beautiful native apps in record time •

    Fast development • Expressive, beautiful UIs • Modern, reactive framework • Access native features and SDKs • Unified app development https://flutter.io/
  5. Flutter Documentation https://flutter.io/docs/ Flutter for Web devs Flutter for Android

    devs Flutter for iOS devs Flutter for React Native devs Flutter for Xamarin.Forms devs
  6. Get Started: Install 1. Get the Flutter SDK a. Download

    Flutter SDK b. Extract the file c. Add the flutter tool to your path 2. Run flutter doctor https://flutter.io/setup-macos/
  7. Get Started: flutter doctor $ flutter doctor ... [-] Android

    toolchain - develop for Android devices • Android SDK at /Users/obiwan/Library/Android/sdk ✗ Android SDK is missing command line tools; download from https://goo.gl/XxQghQ • Try re-installing or updating your Android SDK, visit https://flutter.io/setup/#android-setup for detailed instructions. 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. Hello World import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp

    extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } } https://flutter.io/get-started/codelab/
  10. Hello World import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp

    extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } } https://flutter.io/get-started/codelab/ Immutable
  11. Hello World import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp

    extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } } https://flutter.io/get-started/codelab/
  12. Hello World import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp

    extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } } https://flutter.io/get-started/codelab/
  13. Hello World import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp

    extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Welcome to Flutter', home: Scaffold( appBar: AppBar( title: Text('Welcome to Flutter'), ), body: Center( child: Text('Hello World'), ), ), ); } } https://flutter.io/get-started/codelab/
  14. Preparing an Android App for Release 1. Review the App

    Manifest 2. Review the build configuration 3. Adding a Launcher icon 4. Signing the app 5. Enabling Proguard 6. Building a release APK 7. Publishing an APK to the Google Play Store
  15. Preparing an iOS App for Release 1. Register your app

    on iTunes Connect 2. Review Xcode project settings 3. Add an App Icon 4. Create a build archive 5. Release your app on TestFlight 6. Release your app to the App Store
  16. Material Components Support (July 2018) Android (1.0.0-alph a1) iOS (55.0.2)

    Web (0.35.1) Flutter (Beta 3) Color theme components 8 / 16 12 / 16 9 / 16 16 / 16 Type theme components 7 / 10 9 / 10 5 / 10 10 / 10 Expanded set of components 1 / 3 2 / 3 0 / 3 3 / 3 Shape parameter 0 / 2 2 / 2 2 / 2 2 / 2 https://github.com/material-components/material-components/blob/develop/ROADMAP.md
  17. How to integrate 1. Signed up for a Firebase account

    2. Create a Firebase project 3. Platform-specific Firebase configuration ◦ Configure iOS ◦ Configure Android
  18. Flutter sessions • Flutter & Design ◦ Customize Material Components

    for your product ◦ Build great Material Design products across platforms ◦ Code beautiful UI with Flutter and Material Design • Flutter & Firebase ◦ Total mobile development made fun with Flutter and Firebase ◦ Add Firebase to your cross-platform React Native or Flutter app • Flutter ◦ Build reactive mobile apps with Flutter https://events.google.com/io/schedule/?section=may-8&topic=flutter&type=sessions