Why I chose Flutter

Transcript

1. Flutter allows you to build beautiful native apps on iOS and Android
   from a single codebase.
   

   View Slide

2. Why flutter?
   

   View Slide

3. Why not?
   

   View Slide

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
   

   View Slide

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
   

   View Slide

6. Flutter PROS
   

   View Slide

7. Fast development
   Hot reload
   

   View Slide

8. Fast development
   Material Design Widgets
   

   View Slide

9. Fast development
   Cupertino Widgets
   

   View Slide

10. Fast development
    Fully-customizable Widgets
    

    View Slide

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

    View Slide

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

    View Slide

13. Flutter uses
    

    View Slide

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
    

    View Slide

15. Types of
    Widgets
    

    View Slide

16. Stateless widget
    

    View Slide

17. Stateful widget
    

    View Slide

18. Stateful widget lifecycle
    

    View Slide

19. Layouts
    

    View Slide

20. Main widgets to build your layout
    Row Column Stack
    

    View Slide

21. Row
    It Receives children List
    where each element will be
    positioned horizontal
    You can else align by cross axis,
    main axis and change the direction
    of main axis
    

    View Slide

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
    

    View Slide

23. Stack
    It is useful if you want to overlap
    several children in a simple way.
    

    View Slide

24. Counter
    increment
    Example
    

    View Slide

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.
    

    View Slide

26. Specifying an class to be executed as app
    runApp
    We also defines a main function that will
    run application and send our MyApp
    

    View Slide

27. An statefulwidget
    StatefulWidget
    HomePage it’s gonna be StatefulWidget
    because it’ll be supposed to have an state
    _counter
    

    View Slide

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
    

    View Slide

29. the design will be look like...
    

    View Slide

30. And…
    ACTION!
    

    View Slide

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.
    

    View Slide

32. Working example (with hot reload)….
    

    View Slide

33. and about native
    modules?
    

    View Slide

34. pubscpec.yml
    

    View Slide

35. flutter already have some libs to access…
    

    View Slide

36. flutter already have some libs to access…
    

    View Slide

37. and if I...
    

    View Slide

38. You can create by
    yourself native
    integration!
    

    View Slide

39. Open Source
    

    View Slide

40. And about
    tests?
    

    View Slide

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

    View Slide

42. View Slide

43. Unit Tests
    In addition to make it work you will be
    supposed to add to pubspec.yaml
    flutter test
    

    View Slide

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
    

    View Slide

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
    

    View Slide

46. Behind the
    scenes...
    

    View Slide

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.
    

    View Slide

48. flutter debugger
    DVM
    enable stateful hot reload.
    

    View Slide

49. There is documentation
    for ‘anyone’
    

    View Slide

50. Flutter and dart
    showcases...
    

    View Slide

51. apps using flutter
    

    View Slide

52. dart for web
    

    View Slide

53. Cons
    

    View Slide

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
    

    View Slide

55. Cons
    

    View Slide

56. Bônus
    

    View Slide

57. View Slide

58. that’s it!
    

    View Slide