Building with Flutter

Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase. This presentation took the audience through a journey on building applications with Flutter and provided answers to what, how and when to use flutter.

It highlighted the advantages of adopting flutter, the Dos and Don'ts and How to get your way around when building with Flutter

Transcript

1. Building with Flutter Shuaib Afegbua, @afegbuas Code Kraft Google IO Extended - Minna June 2019
2. THE PROMISE
3. ABOUT ME Technology enthusiast |> Software craftsman |> Loves building stuff Long love affair with Java. Also writes Elixir, Scala and some others • Computer Science major (FUTMINNA and ABU) • Worked at Mott Macdonald/Cambridge Education for a long time and some other places • Got tired, quit and stayed at home. • Built some stuff later
4. What is flutter?
5. Flutter is Google’s portable UI toolkit for building beautiful, natively-compiled applications for mobile, web, and desktop from a single codebase. - flutter.dev
6. APPROACHES ANDROID VS NATIVE
7. why flutter?
8. Flutter empowers the developer.
9. Awesome UI Library EVERYTHING IS A WIDGET • Excellent look and feel • Performs very fast • Extensible and customisable
10. Write once, deploy cross platform SINGLE CODE BASE • One language for UI and Backend • Bundled Framework • Mobile • Web • Desktop • Embedded devices
11. Reactive EVENT DRIVEN • JIT • AOT • Isolate and Event stream
12. Fast Build • Sub seconds fast reloads • Native android with Gradle takes about 10 seconds
13. Native • No bridge • Compiles AOT into Native ARM
14. Efficient • Fast and easy developments • Integrate into existing apps
15. Amazing toolsets • Excellent build tools and IDE intellisense • Growing community • Pub Packages • Cool documentation
16. How flutter does it!
17. Image credits: Flutter Team
18. How to flutter?
19. Set up is easy and well documented. https://flutter.dev/docs
20. flutter create gdg_app cd gdg_app open -a simulator flutter run
21. Just enough Dart?
22. Dart is a language optimized for client-side development for web and mobile. Dart helps you craft beautiful, high-quality experiences across all screens. A client-optimized language Rich, powerful frameworks Delightful, flexible tooling
23. Dart • Data Types • Collections • Functions • Anonymous and first class functions • Classes • Asynchronous programming • HTTP Programming • Mixins • Isolates
24. The building block
25. A tree of widgets and some other stuff
26. Stateless widgets Stateful widgets
27. just when you get started ?
28. Dos and Don’ts.
29. AVOID FAT CLASSES WIDGETS • Widgets are easily composable • Avoid the the temptation of long nested widgets • Abstract common functionalities to custom widgets • Many files has never broken an app • Care about maintainabilty
30. SMALL FUNCTIONS NEVER KILLED ANYONE • Single responsibility principle • Easily testable • Use ⇒ for short functions and methods
31. ADOPT A PATTERN • Take for example state management “madness” • Good old setState() and StatefulWidgets • ScopedModel, Redux, MobX , BLoC • New school - Provider
32. ENSURE CODE CONSISTENCY • Use code formatters – dartformat • Don’t forget to test and test always • Do code reviews
33. TEST OR DIE • Ensures app quality • Unit test your function, method, or class • Carry out component test • Verify app behaviours with Integration tests • Tools: Package test, mockito
34. EMBRACE TOOLS • Superb IDE support VSCODE, IntelliJ • Code completion and Intellisence
35. DOCUMENTATION • Dartdoc exist • They got you a guide - https://dart.dev/guides/language/effective- dart/documentation#doc-comments • Avoid useless documentation • Just save the unfortunate developer that will inherit your code
36. A GOOD NAME IS BETTER ? • Meaningful names • Spell words in identifiers and comments correctly
37. PACKAGES • Maybe that package exist • Growing number of packages • https://pub.dev is your friend. 2,636 and counting • We need more. Start building • Think 3rd party packages before use
38. GETTING HELP • Google is your friend • Don’t we all love stackoverflow • Flutter docs, YouTube, reddit, medium • Just let it crash
39. LINKS • https://github.com/flutter/flutter/wiki/Style-guide-for-Flutter-repo • https://dart.dev/guides/language/effective-dart/documentation#doc- comments • https://flutter.dev/docs/testing • https://medium.com/@afegbua/flutter-thursday-series- 9564d04e63a7