Fun with Flutter

The aim of this presentation is to show the basic concepts of Flutter and why the framework is seen as a very viable alternative for building apps. This was presented at DevFest Lagos 2018

Transcript

1. Idorenyin Obong, SureRemit @kingidee Lagos Fun with Flutter!
2. Flutter Overview Lagos
3. • It is a mobile app SDK for building iOS and Android apps.
4. • It is a mobile app SDK for building iOS and Android apps. • It is open source (https://github.com/flutter/flutter)
7. “Flutter might just be the next G.O.A.T. #DevFestLagos” @KingIdee
8. Awesome features of Flutter • Rich set of Material Design and Cupertino widgets. Location
9. Awesome features of Flutter • Rich set of Material Design and Cupertino widgets. • Native feel out of the box. Lagos
10. Awesome features of Flutter • Rich set of Material Design and Cupertino widgets. • Native feel out of the box. • Hot reload. Lagos
11. Awesome features of Flutter • Rich set of Material Design and Cupertino widgets. • Native feel out of the box. • Hot reload. • Blazing fast rendering. Lagos
12. Behind the Scenes Lagos
13. Problem of cross-platform solutions ? Compromise of native feel Lagos
14. OEM SDKs SDKs for the Original Equipment Manufacturer (OEM) Lagos
15. OEM SDKs • Your app must be written in native code (Swift, Kotlin, etc). Lagos
16. OEM SDKs • Your app must be written in native code (Swift, Kotlin, etc). • Your native code talks directly to your platform to access services. Lagos
17. OEM SDKs • Your app must be written in native code (Swift, Kotlin, etc). • Your native code talks directly to your platform to access services. • Your widgets are rendered on the screen canvas. Lagos
18. OEM SDKs • Your app must be written in native code (Swift, Kotlin, etc). • Your native code talks directly to your platform to access services. • Your widgets are rendered on the screen canvas. • Events are then passed to the widgets. Lagos
20. Cross-platforms (Web views) Your app creates HTML and displays it as Web view Lagos
21. Cross platform - Web views
22. Cross-platforms (Reactive views) • Made up of two realms (native and JS realm) Lagos
23. Cross-platforms (Reactive views) • Made up of two realms (native and JS realm) • The two realms communicate through a bridge Lagos
24. Cross-platforms (Reactive views)
25. The Flutter approach • UI systems don’t handle writing to canvas. Flutter uses its own engine - Skia. Lagos
27. “ A developer’s journey from skepticism to excitement for the future of non-OEM widgets, and bespoke mobile design” - Xter(https://medium.com/@xster)
28. Flutter uses a language that makes it highly performant! Lagos
29. Reasons for the choice of Dart • It is compiled. Lagos
30. Reasons for the choice of Dart • It is compiled. • Garbage collection technique. Lagos
31. Reasons for the choice of Dart • It is compiled. • Garbage collection technique. • A unified layout. Lagos
32. Reasons for the choice of Dart • It is compiled. • Garbage collection technique. • A unified layout. • Seems easier to learn. Lagos
33. Core concepts of Flutter Lagos
34. What are widgets in Flutter ? It is a description of part of a user interface. Lagos
35. Types of Widgets • Stateless Widgets Lagos
36. Types of Widgets • Stateless Widgets • Stateful Widgets Lagos
37. Types of Widgets • Stateless Widgets • Stateful Widgets • Inherited Widgets Lagos
39. Building layouts in Flutter (Basics) Lagos
40. Flutter Setup • Get an IDE (Intellij IDEA or VS code) • Download and install the framework (https://flutter.io/get-started/install/) • Install Flutter dependencies Getting started guide (https://flutter.io/get-started/) Lagos
43. Aligning Widgets Rows, Columns, Center Lagos
48. “A fast app is important but a smooth app is importanter #DevFestLagos” @KingIdee
49. Idorenyin Obong, SureRemit @kingidee Lagos Thank you!
50. Q&A Twitter - @kingidee GitHub - kingidee Lagos