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. 2.

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

    Companies 6. More about Flutter 7. Conclusion
  2. 3.
  3. 5.
  4. 6.
  5. 8.

    Native Platforms Pros • Native Experience • Fast development •

    Hardware utilization • Bleeding edge libraries Cons • Separate teams • Different release plans
  6. 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
  7. 11.
  8. 13.

    Flutter Flutter allows you to build beautiful native apps on

    iOS and Android from a single codebase.
  9. 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.
  10. 16.

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

    Dart • Github Page available at • IDEs: Visual Studio Code, Android Studio, XCode
  11. 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
  12. 21.
  13. 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
  14. 28.
  15. 29.

    1. Beautiful UI • Rich in UI components • Material

    Design • Cupertino • Highly customizable
  16. 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
  17. 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
  18. 32.

    Why Flutter UI is heavily advertised? • Simply because it

    is one of its key differentiators among its competitors
  19. 33.

    2. Native Performance • Powered by SKIA • Hardware Accelerated

    Graphics • Native Experience • Compiled
  20. 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
  21. 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
  22. 37.

    Fast Development: Testimony “Our development process is no longer fragmented

    by platform and we have moved from biweekly releases to weekly releases.” - Reflectly
  23. 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
  24. 39.
  25. 40.

    4. Open Source • Open for extensibility • Continuous development

    of plugins • Wide support from the community
  26. 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.
  27. 49.
  28. 51.

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

    build 50+ million user Xianyu app (Flutter Developer Story)”
  29. 52.

    Should you use Flutter in your company? • It really

    depends • Business implications • Technical complexity
  30. 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
  31. 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
  32. 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
  33. 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
  34. 59.

    Summary: Flutter vs React Native • Despite being new, Flutter

    already dominates React Native on some, if not all, technical areas of mobile development
  35. 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.”
  36. 62.
  37. 63.
  38. 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
  39. 67.
  40. 68.

    Demo MovieHub - Flutter Framework - TheMovieDB API - BLoC

    Pattern - RxDart - Carousel - Shimmer
  41. 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!)
  42. 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...
  43. 74.