Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Why I chose Flutter

Why I chose Flutter

Helio S. Junior

December 17, 2018

Other Decks in Programming


  1. Flutter allows you to build beautiful native apps on iOS

    and Android from a single codebase.
  2. Why flutter?

  3. Why not?

  4. • uses js bridge to run code • JIT (just

    in time) • uses third party e2e tests • no bridge • native typed • hot reload • AOT (ahead of time) • Easy access any native module • 60fps
  5. • not installed (no play store) • harder if needs

    native module not created • Can’t use Bluetooth, NFC and fingerprint scan • Not all browsers • Can’t use notifications on iOS • Can’t use offline on iOS • Can’t use native auth like facebook and google • installed on device • Easy access any native module
  6. Flutter PROS

  7. Fast development Hot reload

  8. Fast development Material Design Widgets

  9. Fast development Cupertino Widgets

  10. Fast development Fully-customizable Widgets

  11. Expressive, beautiful UI’s • Rich motions APIs • Smooth natural

  12. Native Performance • Scrolling • Navigation • Icons • Fonts

  13. Flutter uses

  14. What is Dart • Craft awesome UX/UI • ahead-of-time compilation

    • Syntax clear and concise • Compiles to ARM and X86 • Transpiles to JavaScript • Similiar with C++, C# and Java • Reactive <3
  15. Types of Widgets

  16. Stateless widget

  17. Stateful widget

  18. Stateful widget lifecycle

  19. Layouts

  20. Main widgets to build your layout Row Column Stack

  21. Row It Receives children List<Widget> where each element will be

    positioned horizontal You can else align by cross axis, main axis and change the direction of main axis
  22. Column Same of Row Widget but each element will be

    positioned vertical You can else align by cross axis, main axis and change the direction of main axis
  23. Stack It is useful if you want to overlap several

    children in a simple way.
  24. Counter increment Example

  25. Creating first widget (Main widget) MaterialApp class An application that

    uses material design. home is an property of MaterialApp class that receives an Widget that will be loaded as default.
  26. Specifying an class to be executed as app runApp We

    also defines a main function that will run application and send our MyApp
  27. An statefulwidget StatefulWidget HomePage it’s gonna be StatefulWidget because it’ll

    be supposed to have an state _counter
  28. Building the layout Scaffold Class This class help us to

    build an page following the basic structure of an application like Drawer, Body, Bottom Navigation, AppBar, FloatingActionButton
  29. the design will be look like...

  30. And… ACTION!

  31. Implementing the action of increment counter _incrementCounter() The secret is

    setState, all changes on variables that are used on layouts will be rebuild so the layout will change.
  32. Working example (with hot reload)….

  33. and about native modules?

  34. pubscpec.yml

  35. flutter already have some libs to access…

  36. flutter already have some libs to access…

  37. and if I...

  38. You can create by yourself native integration!

  39. Open Source

  40. And about tests?

  41. 3º 2º 1º Integration tests Widget tests Unit tests

  42. None
  43. Unit Tests In addition to make it work you will

    be supposed to add to pubspec.yaml flutter test
  44. Widget Tests You implement a widget test in a similar

    way as a unit test. To perform an interaction with a widget in your test, use the WidgetTester utility that Flutter provides. flutter test
  45. Integration Tests If you are familiar with Selenium/WebDriver (web), Espresso

    (Android) or UI Automation (iOS), then Flutter Driver is Flutter’s equivalent to those integration testing tools. flutter drive --target=my_app/test_driver/user_list_scrolling.dart
  46. Behind the scenes...

  47. How Flutter runs on Android and iOS C/C++ engine compile

    with... NDK LLVM iOS Android Running on.. a-head of time (AOT) Runner This is similar to the way many game engines work.
  48. flutter debugger DVM enable stateful hot reload.

  49. There is documentation for ‘anyone’

  50. Flutter and dart showcases...

  51. apps using flutter

  52. dart for web

  53. Cons

  54. Cons • core engine 2.77 MB • the framework +

    app code ~ 820 KB • LICENSE 53 KB • classes.dex 62 KB • 450 KB of ICU data ================================= ~ 4.2 MB
  55. Cons

  56. Bônus

  57. None
  58. that’s it!