[DevFest Kobe]Accelerate Flutter Apps Development+DroidconKE 2019 Recap

This is my presentation file on DevFest Kobe 2019.

#DevFest19
#DevFestKobe
#Flutter
#Flutterjp
#mobile

Transcript

1. Accelerate Flutter Apps Development
 +DroidconKE 2019 Recap Kenichi Kambara December 15th, 2019 DevFest Kobe 2019
2. About me • Mobile App Development • Technical Speeches • Droidcon UK/FR/NL/ES/SH/KE • Devoxx UA • GDG DevFest Pisa • Developers Summit • Android Bazaar and Conference • StackOverflow DevDays • Cloud Days • Google I/O Extended Tokyo •Technical Writings •[Official] NTT TechnoCross (Evangelist) •[Private] iplatform.org Kenichi Kambara
3. 1. What’s Droidcon/DroidconKE? 2. My session on DroidconKE 3. Networking 4. Technical Trends on Africa Agenda
4. 1. What’s Droidcon
 /DroidconKE?
6. droidcon’s mission
14. 2. My session on DroidconKE
15. About My Speech
17. My Session 40->?min ver.
18. Flutter Apps SDK for Mobile/Web/Desktop/Others from a single codebase 
19. •Introduction •Flutter Overview •Flutter Basic •Flutter Accelerate Tips •Flutter Latest Topics Agenda
20. •Introduction •Flutter Overview •Flutter Basic •Flutter Accelerate Tips •Flutter Latest Topics Agenda
21. Flutter Accelerate Tips
22. Acceleration for Development ʢTips to Speed Upʣ
23. 1. User Interface 2. IDE & Tools 3. Coding 4. Productivity Tips for Speed Up
24. 1. User Interface 2. IDE & Tools 3. Coding 4. Productivity Tips for Speed Up
25.  My Flutter apps Already released During development
26. User Interface ʢBuilding UI in Flutterʣ Tips 1
27. Text Column Dropdown Button Text Field Raised Button Dropdown Button Text Field Scaffold AppBar Body
 (Container) Top-Down Approach 
28. Implementing with Dart Writing Dart Code->Hot Reload 
29. Any Other approach!? Develop without writing code??
30. Flutter Studio (Web app) https://flutterstudio.app/ 
31. Unfortunately… Writing code is essential!
32. Building UI  Dart Coding GUI Tool Mix-use Difficulty WorkLoad Customizability 3 Approaches
33. Animation
34. 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
35. 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), ),
36. To implement Animation, Only writing Code approach??
37. Using an Animation Tool  Flare: easily add high-quality animation (Web-Based)
38. Flare (Rive) 
39. 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
40. Coding ʢSpeed Up writing codesʣ Tips 3
41. Stateless Widget  class MainPage extends StatelessWidget { @override Widget build(BuildContext context) { return Container(); } }
42. Stateful Widget  class SubPage extends StatefulWidget { @override _SubPageState createState() => _SubPageState(); } class _SubPageState extends State<SubPage> { @override Widget build(BuildContext context) { return Container(); } }
43. 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(); } }
44. So many boilerplates Any Solution?
45. Live Templates 
46.  Live Templates stless/stfull/stanim+[Tab] Key
47. One more…
48. To improve UI & UX
49.  Code Assistant Select Widget & ALT+ENTER
50. 3. Networking
51. Pre-Event
52. Meetup
54. 4. Technical Trends on Africa
57. •Android vs iOS ? •Programming Language ? •African People ? Technical Trends on Africa
58. In Kenya… •UBER Trouble (Called UBER, but…) •Kenya VISA Trouble (Applied, but…) •“Pay For Me” Trouble (On the street.) Please feel free to talk to me later.
59. Thanks.