From Android to Flutter and beyond!

Transcript

1. From Android to Flutter and beyond! Aaron Oertel
2. Who is that guy?
3. My frustrations with Android
4. Activities, Fragments, and everything in between • Argument passing • Navigation gets really hard ◦ Going from Activity to Fragment, hosted in different Activity • Saving state… • Why don’t we just use Views?
5. Fragment- Manager and Lifecycle • Counterintuitive • Google keeps throwing abstraction layers at us ◦ Architecture Components
6. • Scoped to single activity ◦ Multiple navigation graphs • Another abstraction layer that doesn’t solve the actual problem Navigation Architecture Component
7. XML & Databinding • Annoying to specify everything in XML • Databinding increases build times • What attributes does this view support? • ConstraintLayouts hard to maintain & unintuitive
8. My frustrations with Android
9. Flutter - A New Hope!
11. CineFlutter Disclaimer: This is just a pet project
12. Flutter Development is a lot faster!
13. Building UIs Android vs Flutter
14. Steps with Android 1. Create Activity + XML-layout for the whole screen 2. Deserialize Actor-Model in Activity 3. Populate header UI a. Use 3rd-Party Library for CircularImageView b. Use 3rd-Party Library for downloading the image c. Specify the background gradient in XML 4. Create Fragment and XML-Layout for the Movie-List Fragment a. Create (RecyclerView) Adapter b. Fetch movie from network using 3rd-Party-Library c. Wire everything together
15. Steps with Android 5. Create ViewPager Adapter a. Pass Actor Model through Adapter to the Fragments b. Deserialize the Actor Model from the Bundle (Fragment) 6. In Activity: Hook up ViewPager + Adapter + TabLayout 7. Manage state like a mad man 8. Go crazy => ~7 Java/Kotlin/XML files for just the UI
16. Steps with Flutter 1. Create single Widget for Actor-Screen a. Pass Actor-Model as constructor argument 2. In it’s build-method: a. Create Header/Appbar by using CircleAvatar + NetworkImage Widgets and gradient using LinearGradient-Widget b. Use TabController + TabBarView + TabBar widgets as Viewpager c. Use simple Widget for Movie-List d. Use Network-Call-Future to populate Movie-List 3. Enjoy using Hot-Reload while building this => 1 Dart file, 1 Stateless Widget, ~100 lines of code
17. Show me the Code!
18. ActorDetailScreen with Flutter
19. ActorDetailScreen with Flutter
20. ActorDetailScreen with Flutter
21. ActorDetailScreen with Flutter
22. ActorDetailScreen with Flutter
23. ActorDetailScreen with Flutter
24. ActorDetailScreen with Flutter
25. https://github.com/aaronoe/FlutterCinematic
26. Comparing the Android and Flutter App
27. 1992 Lines of Code with Flutter
28. 12376 Lines of Code with Android
29. UI Development - Key Takeaways • Custom is easy and fun! • No more XML • Less boilerplate and wiring required • The app looks and feels the same everywhere! • Hot Reload saves the day!
30. I wrote nicer, more maintainable code that runs on both iOS and Android, in considerably less time and with fewer lines of code.
31. What’s the catch?
32. • Kotlin • Dependency Injection • Persistent Storage options • Android Resources (e.g. strings.xml) • Threads, but only sometimes
33. Questions?
34. Thank you!