Why I chose Flutter

Transcript

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

    scrolling

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!