Natively Fluttering in the hybrid world

Flutter has been around for a while, and it’s getting huge and real.

But what is it? What does it make it so special?

We’ll explore the Flutter architecture and its difference with the mainstream hybrid solutions.
Walking together through the YANA app, we’ll explore what are some commonly used widgets, used to build layouts at super speed, how hot reloading our app makes really smooth our workflow.
Going further, we’ll see how to keep ourselves synced thanks to the firebase plugins, which make authentication and database work super easy, and to save little pieces of data on board easily.
Common basic widget are not the only widgets we’ll see, as we’ll see some more advanced stuff that we can use to easily build UI accordingly to the network state.

Transcript

1. Natively Fluttering in the hybrid world
2. About me Software developer @Ubiquicom Google fanboy Constantly learning Antonello Galipò @magicleon94
3. About Flutter •Open source •Fast development •Expressive and flexible UI •Native performance •Easy to learn •Full of community plugins
4. Fast development with the Hot Reload •Instant changes •State preservation •Wonderful for building the UI
5. Expressive and flexible UI •Material widgets •Cupertino widgets •Easily customisable widgets •Large widget catalog The Reflectly app
6. Community plugins tunitowen/fancy_bottom_navigation MarcinusX/flutter_ui_challenge_filter_menu ariedov/flutter_snaplist letsar/flutter_slidable https://solido.github.io/awesome-flutter/
7. The native architecture
8. The native architecture •Direct communication •Native code •Native widgets •Full control
9. Some mainstream solutions
10. WebViews •Natural step from Web Apps •HTML directly rendered onto a WebView •Slow
11. DOM in WebViews •Immutable Virtual DOM •Virtual and Real DOM synchronisation is heavy
12. Reactive views •Javascript •Used by React Native •Slow due to realm switching
13. Widget tree in React Native •Virtual widget tree of native widgets •Realm switch for synchronisation
14. The Flutter solution
15. The Flutter solution •Reactive-style views •Views are inside the Flutter realm •Compiled to native •Platform channels
16. Widget tree in Flutter •Widget tree is not virtual •“Bit blitting” for cached widgets
17. Flutter architecture
18. Diving in!
19. What is a widget? • A widget is an object which gets rendered • Can be either Stateless or Stateful • Almost everything is a widget in Flutter!
20. Changing the state
21. Common widgets Basic, but still powerful
22. Scaffold
23. Container
24. Image •From file •From network •From asset •From a buffer
25. Row
26. Column
27. ListView
28. GridView
29. Bonus! Cool IDE features
30. Cool IDE features • Widget stubs • Widget shortcuts for wrapping, swapping and removing • Widget inspector • Widget tree (only in Android Studio)
31. The YANA App How does everything fit together?
32. What does YANA do? • Sign in with Google • Create a note and save it to the cloud • Edit a note • Delete a note
33. Plugins Loads of them!
34. Plugins for YANA • firebase_auth: easy third party authentication • google_sign_in: easy login with google • cloud_firestore: interaction with the Firebase Firestore database • flutter_signin_button: out of the box third party sign-in buttons • shared_preferences: easy data persistence on board
35. Advanced widgets
36. Stream Builder •Connects to a Stream •Listens for changes in the stream •Builds the widget accordingly to the stream variations
37. Future Builder • Watches a Future • When the Future has completed, builds the Widget accordingly
38. Showtime!
39. Useful links • https://flutter.io • https://flutter.io/docs/development/ui/widgets • https://solido.github.io/awesome-flutter/ • https://medium.com/flutter-community/reactive- programming-streams-bloc-6f0d2bd2d248 • https://medium.com/flutterpub
40. Resources • https://hackernoon.com/whats-revolutionary- about-flutter-946915b09514 • https://flutter.io • https://github.com/magicleon94/YANA
41. Thank you!