May Flutter Meetup - Building TV and Wear App with Flutter

Transcript

1. Building app for TV and wearable Montréal Billy Taing Software Engineer Davidson Canada 1 17/05/2023
2. Quick reminder TV & Wearable Project Demo Feedbacks Conclusion 2 Summary
3. Quick reminder A complete one 3
4. Dart & Flutter Object-Oriented Programming Easy to learn The bird’s name is Dash ➡ Open-Source & Well documented Inclusive & Large community Github 153k ⭐ Beautiful UI Productive & Efficient 4
5. 2018 2019 2020 2021 2022 Dart 2.0 Sound type system 2.12 Sound null-safety 2.7 extension 3.0 100% null-safety, records, class modi ers 2.17 Improve enums, super, named params order 1.0 release 1.22 iOS14, Android 11, i18n, l10n 3.0 Windows, macOS, Linux stable 2.0 Desktop beta Flutter 5 Dart & Flutter history 2023 3.10 WASM, Impeller
6. Mobile/Tablet: Android, iOS Web: JavaScript, WASM Desktop: Windows, MacOS, Linux, Chrome OS Embedded: Smart screens, Automotive, ARM, Raspberry Cross-Platform 6 TV: Android TV OS Wearable: WearOS
7. TV & Wearable Very particular devices 7
8. Google Pixel Watch Google TV Hardware & System Android TV OS (Android 10) CPU quad-core @1.9 GHz RAM 2GB No battery Support 720p, 1080p, 2160p Wifi 5 Ghz (or Ethernet) WearOS 3.5 (Android 11) WearOS 4.0 (Android 13) CPU dual-core @1.15 GHz RAM 2GB 294 mAh battery Screen of 450 x 450 pixels Wifi 2.4Ghz 8
9. Google Pixel Watch Google TV Navigation & Constraints Remote controller D-pad + Select button Almost big screen Touch screen (circular) No back button Lot of pixels but big density Internet over-bluetooth (slow) 9
10. Google Pixel Watch Google TV Development environment Debugging over-wifi adb connect <ip:5555> Optional: <category android:name="android.intent.ca tegory.LEANBACK_LAUNCHER" /> Debugging over-wifi adb pair <ip:port1> <code> adb connect <ip:port2> 10
11. Project News cross-platform 11
12. Le Journal de Montréal Mobile, Wearable and TV app based on Web design Use JdeM theme design Consume RSS Feed UX/UI research for different type of screens 12
13. Device detection Platform detects the OS isAndroid is true for: - Mobile - Tablet - TV - Wearable Use MediaQuery ? Detect AspectRatio ? 13
14. Solution 2 : Compilation Solution 1 : Multi-Project Pros: - Strict separation Cons: - Mono/Multi-repo choice - Duplicated pubspec.yaml - Shared UI using an UI repo Pros: - Only one line [--dart-define TYPE=<tv|wear>] - Device type as constant - One project, all devices - Multiple main_<type>.dart Cons: - Don’t forget CI/CD setup 14 Device detection
15. 15 Device detection Solution 3 : Package package_info_plus Pros: - Flutter integration - Runtime execution - One project, all devices Cons: - ?
16. Remote handler Remote is a keyboard Use Button or Focus Flutter handles arrows behaviors and manage FocusNode 16
17. Demo And its effects 17
18. Feedbacks There’s a lot to say 18
19. In general Same code for all devices Code/Architecture optimization for everyone Ecosystem design 19
20. TV development Do: - Animations feedback - Learn how to (use) Focus - UX/UI keyboard first Don’t: - ? 20
21. Wearable development Do: - Small content - Simple navigation - SHOW TIME (please) - Static content - Use in-memory cache 21
22. Wearable development Don’t: - Make an image gallery - Heavy processing - Swipe right (but left) 22
23. Conclusion Promise, it’s almost done 23
24. Is it ready ? It works but not completely ready Packages (wear, wearable_rotary) 24 Moving further Communication with phone Impeller will be crazy
25. What is possible ? Should work WearOS: - Native keyboard - Native navigation - WatchFace ? 50% sure possible Shouldn’t work Apple TV and WatchOS Android Auto 25
26. Thank you 26
27. Q U E S T I O N S ? 27 discord.fluttermtl.dev /in/taingbilly