[DroidconKE]Accelerate Flutter Apps Development

This is my presentation file on DroidconKE 2019.

#Droidcon
#DroidconKE
#Flutter
#mobile

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