Save 37% off PRO during our Black Friday Sale! »

Mobile Development with Flutter

Mobile Development with Flutter

This is the presentation used by Joshua de Guzman in the Meetup #3 of PADC (Philippine Android Developers Community), hosted at HQ, BGC, Taguig City.

Event Page:

Joshua de Guzman


Joshua de Guzman

April 24, 2019


  1. Mobile Development with Flutter Joshua de Guzman Android Engineer,

  2. Agenda 1. Problem 2. Flutter 3. Trends 4. Features 5.

    Companies 6. More about Flutter 7. Conclusion
  3. Problem

  4. Multiple platforms

  5. Funding

  6. Intro

  7. Native Platforms • Android ◦ Java ◦ Kotlin • iOS

    ◦ Objective-C ◦ Swift
  8. Native Platforms Pros • Native Experience • Fast development •

    Hardware utilization • Bleeding edge libraries Cons • Separate teams • Different release plans
  9. Cross Platform & Hybrid Frameworks

  10. Cross Platform & Hybrid Frameworks Pros • Code sharing •

    Single team Cons • Not all code are shared • Access on the native components relies on the framework • Different design language
  11. Flutter

  12. Flutter Samples

  13. Flutter Flutter allows you to build beautiful native apps on

    iOS and Android from a single codebase.
  14. Flutter Flutter is an open-source mobile application development framework created

    by Google. It is used to develop applications for Android and iOS, as well as being the primary method of creating applications for Google Fuchsia.
  15. The boring stuffs

  16. Flutter • Written in C++, Dart • Programming Language is

    Dart • Github Page available at • IDEs: Visual Studio Code, Android Studio, XCode
  17. Flutter: Releases • Initial Release ◦ Alpha (v0.0.6) - Released

    on May 2017 • Preview Release 2 ◦ v0.8.2 - Released on Sep, 2018 • Stable Release ◦ v1.2.2 - Released on Feb, 2019
  18. Flutter: Dart • Productive • Fast • Portable • Approachable

    • Reactive
  19. Flutter: Platform • Windows • MacOS • Linux

  20. Flutter: Target • Android • iOS

  21. Trends

  22. Stargazers Source:

  23. Contributors Source:

  24. Flutter vs React Native Worldwide Trend Over 12 Months

  25. Flutter vs React Native Philippines Trend Over 12 Months


  27. • Flutter is gaining traction over the past 12 months

    • Significant number of contributors • It’s major competitor* is React Native * In terms of cross platform framework interests over time Summary: Trends
  28. Features

  29. 1. Beautiful UI • Rich in UI components • Material

    Design • Cupertino • Highly customizable
  30. Beautiful UI: Rich in Components • Have the full support

    of the Google’s Material Design Team • React Native and Native Script’s components is nowhere near Flutter’s out of the box components
  31. Beautiful UI: Testimony “...Overflows failed and as result scroll elements

    went missing and shadows were cut off in strange ways. Furthermore, animations turned out unbearably sluggish.” - Reflectly to-flutter-2e3dffced2ea
  32. Why Flutter UI is heavily advertised? • Simply because it

    is one of its key differentiators among its competitors
  33. 2. Native Performance • Powered by SKIA • Hardware Accelerated

    Graphics • Native Experience • Compiled
  34. Native Performance: SKIA Graphics • Written in C++ • NOT

    A UI WRAPPER - draws the UI from scratch on a “screen canvas” • Used by Google Chrome, Chrome OS, Android and many more
  35. 3. Fast Development • Improved work productivity • Stateful Hot

    Reload • Iterate apps on real-time
  36. Fast Development: Testimony “Our teams move faster, execute better, and

    have higher morale. Since we only have to build features once, the app is far more consistent on both iOS and Android with less overhead ensuring the consistency.” - Hamilton Musical
  37. Fast Development: Testimony “Our development process is no longer fragmented

    by platform and we have moved from biweekly releases to weekly releases.” - Reflectly
  38. Fast Development: Testimony “Developing apps in Flutter is super fast

    -- especially for prototyping. It eliminates most boilerplates, if not all, we used to have in native Android development.” - Joshua de Guzman
  39. None
  40. 4. Open Source • Open for extensibility • Continuous development

    of plugins • Wide support from the community
  41. Summary: Features 1. Beautiful UI 2. Native Performance 3. Fast

    Development 4. Open
  42. Performance

  43. Performance You can expect excellent performance. Flutter is designed to

    help developers easily achieve a constant 60fps. Flutter apps run via natively compiled code – no interpreters are involved. This means Flutter apps start quickly.
  44. Architecture

  45. Flutter Architecture ngine-architecture

  46. Dependencies

  47. Dependencies • Pub is package manager for Dart

  48. Using Native Code Dependencies m-integration/platform-channels

  49. Companies

  50. Companies using React Native

  51. Companies using Flutter … your company? “Alibaba used Flutter to

    build 50+ million user Xianyu app (Flutter Developer Story)”
  52. Should you use Flutter in your company? • It really

    depends • Business implications • Technical complexity
  53. Summary: Companies • React Native has built a reputation in

    terms of the big companies who are using it • Flutter’s just starting to attract big companies as of the moment
  54. Summary: Companies • Consider both the business implications and technical

  55. Flutter vs React Native

  56. Flutter vs React Native (Basics) Flutter React Native P. Language

    Flutter Javascript Ecosystem Not yet mature Quite Mature Created by Google Facebook First Release May 2017 Jan 2015
  57. Flutter vs React Native Flutter React Native Technical Architecture Skia

    Flux Components Rich in Components Less Components Testing Rich set of documentation about testing No official support for integration and UI level testing DevOps and CI/CD Has official documentation for this Has no official documentation but developers do post some articles how to do it
  58. Flutter vs React Native Flutter React Native Build & Release

    Automation Support Has strong command line interface. Has official documentation regarding deployment process with fastlane Has no official documentation about any automated steps to deploy iOS apps to App store Learning Curve Difficult to pick up; learning curve for Dart and “almost” requires you to learn reactive programming immediately Easy to pick up; especially for Javascript developers
  59. Summary: Flutter vs React Native • Despite being new, Flutter

    already dominates React Native on some, if not all, technical areas of mobile development
  60. Interoperability

  61. Interoperability “Interoperability is a characteristic of a product or system,

    whose interfaces are completely understood, to work with other products or systems, at present or in the future, in either implementation or access, without any restrictions.”
  62. None
  63. None
  64. Using Platform Specific Code

  65. Useful Commands

  66. Useful Commands Basic • flutter analyze • flutter doctor •

    flutter packages get • flutter run • flutter screenshot • flutter stop Advanced • flutter build • flutter update-packages • flutter channel To see all commands, enter flutter --help
  67. Demo

  68. Demo MovieHub - Flutter Framework - TheMovieDB API - BLoC

    Pattern - RxDart - Carousel - Shimmer
  69. Practical Coding

  70. Things to consider (the downside)

  71. Things to consider (the downside as of the moment) •

    Flutter is still on beta • Limited TV support • Mobile only • Google Maps Package still on Developer Preview • Heavily dependent on the current state of Dart (eg. currently no support for enums, algebraic data types, sealed classes, associated values) • Has smaller set of libraries vs native platforms (given that it’s still young!)
  72. Conclusion

  73. Conclusion • Flutter has a lot to offer • Give

    Flutter a chance • Experience with the framework is the key • Flutter will continue to grow • and lastly, learn, practice and contribute...
  74. Bonus

  75. Flare Flare is a powerful design and animation tool created

    by 2dimensions
  76. History of Everything by 2dimensions ing

  77. Flutter Awesome

  78. Questions?

  79. Thank You!