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

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

This is my presentation file on DevFest Kobe 2019.

#DevFest19
#DevFestKobe
#Flutter
#Flutterjp
#mobile

97a7f7899e0df28c3636b8d44bbe6578?s=128

Kenichi Kambara

December 15, 2019
Tweet

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?

  5. None
  6. droidcon’s mission

  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. 2. My session on DroidconKE

  15. About My Speech

  16. None
  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

  53. None
  54. 4. Technical Trends on Africa

  55. None
  56. None
  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.