[DroidconKE]Accelerate Flutter Apps Development

[DroidconKE]Accelerate Flutter Apps Development

This is my presentation file on DroidconKE 2019.

#Droidcon
#DroidconKE
#Flutter
#mobile

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

August 08, 2019
Tweet

Transcript

  1. Accelerate Flutter Apps Development Kenichi Kambara (@korodroid) 8 August, 2019

  2. About me • Mobile App Development • Technical Speeches •

    Droidcon UK/FR/NL/ES/SH • Devoxx UA • GDG DevFest Pisa • Developers Summit • Android Bazaar and Conference • StackOverflow DevDays • Cloud Days • Google I/O Extended Tokyo 2018 •Technical Writings •[Official] NTT TechnoCross •[Private] iplatform.org Kenichi Kambara (@korodroid)
  3. •Introduction •Flutter Overview •Flutter Basic •Flutter Accelerate Tips •Flutter Latest

    Topics Agenda
  4.   Mobile Platform share (StatCounter) StatCounter Global Stats (http://gs.statcounter.com/os-market-share/mobile/worldwide)

  5.   Mobile Apps Development (Native) Kotlin Swift

  6. Cross-Platform Approach

  7.   Cross-Platform Activity (StackOverflow) Number of StackOverflow question views

    tagged with each of four popular UI frameworks over time (https://bit.ly/2A0tzuK)
  8.   Cross-Platform Activity (StackOverflow) Number of StackOverflow question views

    tagged with each of four popular UI frameworks over time (https://bit.ly/2A0tzuK)
  9. 1. Has known a bit about “Flutter”? 2. Has developed

    “Hello Flutter”? 3. Has developed any Flutter apps? 4. Has published any Flutter apps? ? Questions
  10. Flutter Overview

  11. Flutter Apps SDK for Mobile/Web/Desktop/Others from a single codebase 

    
  12. Flutter Overview 1. Beautiful UI & High Performance 2. Fast

    Development 3. Dart  
  13. 1. Beautiful UI & High Performance Original UI for iOS/Android

    https://flutter.dev/showcase  
  14. 2. Fast Development https://flutter.dev/docs/get-started/editor  

  15. Injecting updated code (Hot Reload) https://flutter.dev/docs/development/tools/hot-reload   2. Fast

    Development
  16. Very similar to Java/Java Script import 'package:flutter/material.dart'; void main() {

    runApp( Center( child: Text( ‘Hello, Flutter', textDirection: TextDirection.ltr, ), ), ); }   3. Dart
  17. Very similar to Java/Java Script import 'package:flutter/material.dart'; void main() {

    runApp( Center( child: Text( ‘Hello, Flutter', textDirection: TextDirection.ltr, ), ), ); }   3. Dart
  18. Very similar to Java/Java Script import 'package:flutter/material.dart'; void main() {

    runApp( Center( child: Text( ‘Hello, Flutter', textDirection: TextDirection.ltr, ), ), ); }   3. Dart
  19. Very similar to Java/Java Script import 'package:flutter/material.dart'; void main() {

    runApp( Center( child: Text( ‘Hello, Flutter', textDirection: TextDirection.ltr, ), ), ); }   3. Dart
  20. Very similar to Java/Java Script import 'package:flutter/material.dart'; void main() {

    runApp( Center( child: Text( ‘Hello, Flutter', textDirection: TextDirection.ltr, ), ), ); }   3. Dart Note: Optional “new”, “const” from Dart 2.x
  21.   Beyond Mobile Flutter for Desktop Flutter for Web

  22. Flutter Basic  

  23. Hello Flutter  

  24. Flutter App Structure •Source Code(*.dart) •Package Definition •Resource Definition 

    
  25. Simple Flutter Material App 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(‘My First Flutter'), ), body: Center( child: Text(‘Hello, Flutter'), ), ), ); } } change to the below code (<project>/libs/main.dart)  
  26. Simple Flutter Material App 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(‘My First Flutter'), ), body: Center( child: Text(‘Hello, Flutter'), ), ), ); } }   Writing Dart code for Layout ( LayoutXML, StoryBoard)
  27. Simple Flutter Material App 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(‘My First Flutter'), ), body: Center( child: Text(‘Hello, Flutter'), ), ), ); } } change to the below code (<project>/libs/main.dart)  
  28. All App Components: Widget Note: Tree Structure Text AppBar 


    Body Scaffold Text   Center
  29. StatefulWidget (Dynamic Screen Update) class MyApp extends StatelessWidget { @override

    Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(title: ‘My First Flutter'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() =>_MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } … Note: State (Manage Widget Status)  
  30. Flutter Accelerate Tips

  31. Acceleration for Development ʢTips to Speed Upʣ

  32. 1. User Interface 2. IDE & Tools 3. Coding 4.

    Productivity Tips for Speed Up
  33.   My Flutter apps Already released During development

  34. User Interface ʢBuilding UI in Flutterʣ Tips 1

  35. Scaffold AppBar Body
 (Container) Point: Building UI Understanding a Widget

    Tree  
  36. Text Column Dropdown Button Text Field Raised Button Dropdown Button

    Text Field Scaffold AppBar Body
 (Container) Top-Down Approach  
  37. Implementing with Dart Writing Dart Code->Hot Reload  

  38. Any Other approach!? Develop without writing code??

  39. Using a GUI Design Tool Flutter Studio (Web app) https://flutterstudio.app/

     
  40.   Let’s try (Live Demo)

  41. Unfortunately… Writing code is essential!

  42. Building UI   Dart Coding GUI Tool Mix-use Difficulty

    WorkLoad Customizability 3 Approaches
  43. Animation

  44. Implementing with Dart   •Implicit Widget •No need AnimationController

    (using setState()) •Customization: Moderate
 •Transition Widget •Requires AnimationController •Customization: Middle •Explicit Widget •Requires AnimationController •Customization: High Implicit Widget Transition Widget
  45. Code Sample (Implicit Widget)   body: Center( child: AnimatedOpacity(

    opacity: _visible ? 1.0 : 0.0, duration: Duration(milliseconds: 2000), child: Image.asset('images/chara.png')), ), floatingActionButton: FloatingActionButton( onPressed: () { setState(() { _visible = !_visible; }); }, tooltip: ‘Switch Opacity', child: Icon(Icons.flip), ),
  46. To implement Animation, Only writing Code approach??

  47. Using an Animation Tool   Flare: easily add high-quality

    animation (Web-Based)
  48. Flare  

  49. Flare   Adding Flare package into Flutter Project dependencies:

    flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^0.1.2 ## Flare flare_flutter: pubspec.yaml
  50. Flare   Importing Flare data (*.flr) and Coding return

    Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: FlareActor( "assets/sample.flr", animation: "sample01", fit: BoxFit.contain, )), ); } main.dart
  51. IDE & Tools ʢDevelopment Environmentʣ Tips 2

  52. Dart DevTools  

  53. (1) Widget Inspector (2) Timeline View (3) Source-level Debugger (4)

    Logging View Dart DevTools (Web Tools)
  54.   Install & Run

  55.   (1) Widget Inspector

  56.   (2) Timeline View

  57.   (3) Source-level Debugger

  58.   (4) Logging View

  59. Let’s try (Live Demo)

  60. Coding ʢSpeed Up writing codesʣ Tips 3

  61. Stateless Widget   class MainPage extends StatelessWidget { @override

    Widget build(BuildContext context) { return Container(); } }
  62. Stateful Widget   class SubPage extends StatefulWidget { @override

    _SubPageState createState() => _SubPageState(); } class _SubPageState extends State<SubPage> { @override Widget build(BuildContext context) { return Container(); } }
  63. Animation   class AnimPage extends StatefulWidget { @override _AnimPageState

    createState() => _AnimPageState(); } class _AnimPageState extends State<AnimPage> with SingleTickerProviderStateMixin { AnimationController _controller; @override void initState() { _controller = AnimationController(vsync: this); super.initState(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Container(); } }
  64. So many boilerplates Any Solution?

  65. Live Templates  

  66.   Live Templates stless/stfull/stanim+[Tab] Key

  67. One more…

  68. To improve UI & UX

  69.   Code Assistant Feature Select Widget & ALT+ENTER

  70. Let’s try (Live Demo)

  71. Creating Sample App   $ flutter create --sample=material.AppBar.1 mysample

    $ cd mysample $ flutter run
  72.   How to create Sample App flutter.dev

  73.   How to create Sample App

  74. Tips 4 Productivity ʢAccelate Developmentʣ

  75. Solution: Before reinventing a wheel… https://pub.dev/  

  76. e.g. Save Key-Value Data (3) (1) (2) Search by “sharedpreferences”

     
  77. Android Studio procedure (1) (2)  

  78. Sample Code using Packages import 'package:shared_preferences/shared_preferences.dart'; _saveSampleData(String value) async {


    SharedPreferences prefs = await SharedPreferences.getInstance();
 await prefs.setString('key1', value);
 } (3)  
  79. Recommended Packages •http •HTTP Client •Easy to implement REST
 •firebase

    •lol Firebase!!! •Easy to add Firebase features •share •Contents share (Similar to Android/iOS) •e.g. Share to SNS  
  80. Flutter Latest Topics

  81. Ref.)Announcing Flutter 1.5 (2019.05.08)@Google I/O 2019

  82. Flutter 1.5 Overview   •Bug fixed (in Flutter 1.2)

    •Material & Cupertino Widget Sets •In-App Purchases Supports •Dart 2.3 •Flutter for Web
  83. Flutter 1.5 Overview •Bug fixed (in Flutter 1.2) •Material &

    Cupertino Widget Sets •In-App Purchases Supports •Dart 2.3 •Flutter for Web  
  84. Steps for “Hello Flutter for Web” 1. Upgrading Flutter
 $

    flutter upgrade 2. Cloning “Flutter for Web”
 $ git clone https://github.com/flutter/flutter_web.git 3. Moving to “Hello World (Flutter for Web)”
 $ cd examples/hello_world/ 4. Adding some tools (webdev/dart) to PATH
 $ export PATH=“$PATH”:<MY_FLUTTER_PATH>/.pub_cache/bin
 $ export PATH=“$PATH":<MY_FLUTTER_PATH>/bin/cache/dart-sdk/bin 5. Updating our project
 $ pub get 6. RUN!!!
 $ webdev serve  
  85. “Hello Flutter for Web”  

  86. Ref.)Announcing Flutter 1.7 (2019.07.10)

  87. Flutter 1.7 Overview •AndroidX support for new apps •Support for

    Android app bundles  
  88. AndroidX support for new apps AndroidX: a new open source

    support library from Jetpack  
  89. AndroidX support for new apps [How to Create a Flutter

    Project includes AndroidX (Default: Disable)] $ flutter create --androidx myapp  
  90. How to migrate a Flutter app to AndroidX [Use Android

    Studio to migrate your app] 1. Import your Flutter app into Android Studio 2. On Android Studio, Refactor > Migrate to AndroidX Recommended [Manually migrate your app] ref. https://flutter.dev/docs/development/packages-and-plugins/androidx-compatibility Not Recommended  
  91. How to avoid AndroidX?? https://flutter.dev/docs/development/packages-and-plugins/androidx-compatibility  

  92. Why must we use Android app bundle? https://android-developers.googleblog.com/2019/01/get-your-apps-ready-for-64-bit.html  

  93. [- Flutter 1.5] Supporting 64-bit app [Creating both 32-bit and

    64-bit apps (2 .apk)] $ flutter build apk --release —target-platform=android-arm $ flutter build apk --release —target-platform=android-arm64 [Uploading 2 .apk] 2 apks -> Google Play Store  
  94. [Flutter 1.7 - ] Supporting 64-bit app [Creating Android app

    bundle (1 .aab)] $ flutter build appbundle [Uploading 1 .aab] 1 aab -> Google Play Store  
  95. •A tool for cross platform development •Efficient development with Tips

    •Ready for Production Apps Summary  
  96. Please let me know if you have any requests 


    such as technical speeches, technical writings and so on. Facebook:http://fb.com/kanbara.kenichi Twitter:@korodroid LinkedIn:http://www.linkedin.com/in/korodroid Thank you so much