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
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
58. that’s it!