Best Practices and Tips in Flutter App Development

This is my presentation file on DevFestPisa 2019.

#DevFest
#DevFestPisa
#Flutter
#mobile

Transcript

1. Best Practices and Tips
 in Flutter App Development Kenichi Kambara (@korodroid) 13 April, 2019
2. About me • Mobile App Development • Technical Speeches • Droidcon UK/FR/NL/ES/SH • Devoxx UA • 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 Best Practices •Flutter Latest Topics Agenda
4. Source: Google Developers Blog(2019.03.04)
5. 
    Mobile Platform share (StatCounter) StatCounter Global Stats (http://gs.statcounter.com/os-market-share/mobile/worldwide)
6. 
    Mobile Apps Development (Native) Kotlin Swift
7. Cross-Platform Approach
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. 
    Cross-Platform Activity (StackOverflow) Number of StackOverflow question views tagged with each of four popular UI frameworks over time (https://bit.ly/2A0tzuK)
10. 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
11. Flutter Overview
12. Flutter a Mobile App SDK for Android/iOS apps from a single codebase
    
13. Flutter Overview 1. Beautiful UI & High Performance 2. Fast Development 3. Dart
    
14. 1. Beautiful UI & High Performance Original UI for iOS/Android https://flutter.dev/showcase
    
15. 2. Fast Development https://flutter.dev/docs/get-started/editor
    
16. Injecting updated code (Hot Reload) https://flutter.dev/docs/development/tools/hot-reload
     2. Fast Development
17. 
     Note: Settings (Plugins->Flutter) 2. Fast Development
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
21. Very similar to Java/Java Script import 'package:flutter/material.dart'; void main() { runApp( Center( child: Text( ‘Hello, Flutter', textDirection: TextDirection.ltr, ), ), ); }
     3. Dart
22. 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
23. Flutter Basic
    
24. Hello Flutter
    
25. Flutter App Structure •Source Code(*.dart) •Package Definition •Resource Definition
    
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'), ), ), ); } } change to the below code (<project>/libs/main.dart)
    
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'), ), ), ); } }
     Writing Dart code for Layout ( LayoutXML, StoryBoard)
28. 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)
    
29. All App Components: Widget Note: Tree Structure Text AppBar 
 Body Scaffold Text
     Center
30. StatefulWidget (Dynamic Screen Update) class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: MyHomePage(title: 'Welcome to 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)
    
31. Flutter Best Practices & Tips
32. Flutter for Production ʢpractices to release appsʣ
33. 
     My Flutter apps Already released During development
34. 1. User Interface 2. Architecture 3. Productivity 4. Internationalization Practices for Production
35. Building UI in Flutter ʢFrom a standpoint of Native Developmentʣ Practice 1
36. Building Layouts Note: possible to mix-use Implementing with Dart Using a GUI Design Tool
    
37. Implementing with Dart Writing Dart Code->Hot Reload
    
38. Using a GUI Design Tool Flutter Studio (Web app) https://flutterstudio.app/
    
39. It’s like a Magic!? Better than writing code??
40. Unfortunately… Writing code is essential!
41. Scaffold AppBar Body
 (Container) Point: Building UIs Understanding a Widget Tree
    
42. Text Column Dropdown Button Text Field Raised Button Dropdown Button Text Field Scaffold AppBar Body
 (Container) Top-Down Approach
    
43. More Keys about building UIs Simple Layouts Alignments Relative proportions
    
44. Simple Layouts LinearLayout (android:orientation) vertical horizontal
    
45. Simple Layouts Column / Row Widget Column Row
    
46. Alignments wrap_content / match_parent wrap_content match_parent
    
47. Alignments CrossAxisAlignment Property CrossAxisAlignment.start CrossAxisAlignment.stretch
    
48. Relative proportions layout_weight layout_weight=“1” layout_weight=“2”
    
49. Relative proportions Expanded Widget+flex property Expanded Widget
 flex: 1 Expanded Widget
 flex: 2
    
50. child: Container( child: Column( mainAxisSize: MainAxisSize.max, children: <Widget>[ Expanded( child: Container( child: Row( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[button1], ), ), flex: 1, ), Expanded( child: Container( child: Row( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.stretch, children: <Widget>[button2], ), ), flex: 2, ), ], ), ), Expanded Widget+flex property Relative proportions
    
51. Creating Animations Note: possible to mix-use Implementing with Dart Using an Animation Tool
    
52. 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
53. 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), ),
54. Code Sample (Transition Widget)
     body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ ScaleTransition( scale: CurvedAnimation( parent: _controller, curve: Curves.easeIn, ), child: Image.asset('images/chara.png'), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: switchExpansion, tooltip: 'Switch', child: Icon(Icons.add), ),
55. Code Sample (Transition Widget)
     class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { AnimationController _controller; @override void initState() { super.initState(); _controller = new AnimationController( vsync: this, duration: const Duration(milliseconds: 500), )..forward(); } void switchExpansion() { if (_controller.isDismissed) { _controller.forward(); } else { _controller.reverse(); } } // … }
56. Using an Animation Tool
     Flare: easily add high-quality animation (Web-Based)
57. Flare
     An Authoring Tool on Web
58. Flare
     Adding Flare package to 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
59. 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
60. Practice 2 Architecture ʢBusiness Logicʣ
61. 
     Problem: refreshing UI dependency on state [state]
62. 
     Problem: refreshing UI dependency on state [state]
63. 
     Build reactive mobile apps with Flutter (Google I/O 2018) BLoC Architecture
64. 
     BLoC Architecture BLoC [Input] [Output] Sink Stream
65. 
     BLoC Sample (Input/Sink) floatingActionButton: FloatingActionButton( onPressed: () => _controller.sink.add(++_counter), tooltip: 'Increment', child: Icon(Icons.add), ),
66. 
     BLoC Sample (Output/Stream) StreamBuilder( stream: _controller.stream, initialData: 0, builder: (BuildContext context, AsyncSnapshot snapshot) { return new Text( '${snapshot.data}', style: Theme.of(context).textTheme.display1, ); }, )
67. Practice 3 Productivity ʢAccelate Developmentʣ
68. Solution: Before reinventing a wheel… https://pub.dartlang.org/flutter
    
69. e.g. Save Key-Value Data (3) (1) (2) Search by “sharedpreferences”
    
70. Android Studio procedure (1) (2)
    
71. 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)
    
72. 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
    
73. Problem: Boilerplate
     class MainPage extends StatefulWidget { @override _MainPageState createState() => _MainPageState(); } class _MainPageState extends State<MainPage> { @override Widget build(BuildContext context) { return Container(); } } class SubPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } }
74. Solution: Live Template
    
75. Solution: Live Template
     stless/stfull/stanim/inh+[Tab]
76. Internationalization before Release ʢTo support multiple languagesʣ Practice 4
77. Internationalization Japanese English
    
78. Official Approaches need a lot of tasks…
79. Solution: “Flutter i18n”(Plugin for Android Studio) Search “flutter” on Android Studio
    
80. Steps for Internationalization
81. Step0. Auto-Generated File 2 files are gerenated automatically. Note: If these files aren’t gererated, close and open again.
    
82. Step0. Auto-Generated File e.g. lib/generated/i18n.dart
    
83. 
     Step1. Setting default Language lib/main.dart
    
84. Step2. Preparing Language Resources res/values/
 strings_en.arb <- Copy and Create other files (e.g. strings_it.arb) { "appTitle": “Sample App", "appSummary": "Hello" } strings_en.arb strings_it.arb { "appTitle": "App di esempio", "appSummary": “Ciao” } Note: To modify language resources, it’s requreid to modify strings_*.arb.
    
85. Step3. Using Language Resources lib/main.dart
    
86. Flutter Latest Topics
87. Flutter 1.2 Overview •Dart 2.2 •Material & Cupertino Widget Sets •In-App Purchases •Android App Bundles •New Developer Tools
    
88. Flutter 1.2 Overview •Dart 2.2 •Material & Cupertino Widget Sets •In-App Purchases •Android App Bundles •New Developer Tools
    
89. New Developer Tools: Dart DevTools
    
90. Dart DevTools (Web Tools) 1. Widget Inspector 2. Timeline View 3. Source-level Debugger 4. Logging View
    
91. Install & Run
92. Install & Run
    
93. Install & Run
94. 1. Widget Inspector
95. 2. Timeline View
96. 3. Source-level Debugger
97. 4. Logging View
98. ???->
99. ???->GitHub issues (flutter/devtools)
100. •A tool for cross platform mobile development •Efficient development with Tips •Ready for Production Apps Summary
     
101. 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