May Flutter Meetup - Building TV and Wear App with Flutter

Slide 1

Slide 1 text

Building app for TV and wearable Montréal Billy Taing Software Engineer Davidson Canada 1 17/05/2023

Slide 2

Slide 2 text

Quick reminder TV & Wearable Project Demo Feedbacks Conclusion 2 Summary

Slide 3

Slide 3 text

Quick reminder A complete one 3

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

TV & Wearable Very particular devices 7

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Google Pixel Watch Google TV Development environment Debugging over-wifi adb connect Optional: Debugging over-wifi adb pair


adb connect 
10

Slide 11

Slide 11 text

Project News cross-platform 11

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

Device detection Platform detects the OS isAndroid is true for: - Mobile - Tablet - TV - Wearable Use MediaQuery ? Detect AspectRatio ? 13

Slide 14

Slide 14 text

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=] - Device type as constant - One project, all devices - Multiple main_.dart Cons: - Don’t forget CI/CD setup 14 Device detection

Slide 15

Slide 15 text

15 Device detection Solution 3 : Package package_info_plus Pros: - Flutter integration - Runtime execution - One project, all devices Cons: - ?

Slide 16

Slide 16 text

Remote handler Remote is a keyboard Use Button or Focus Flutter handles arrows behaviors and manage FocusNode 16

Slide 17

Slide 17 text

Demo And its effects 17

Slide 18

Slide 18 text

Feedbacks There’s a lot to say 18

Slide 19

Slide 19 text

In general Same code for all devices Code/Architecture optimization for everyone Ecosystem design 19

Slide 20

Slide 20 text

TV development Do: - Animations feedback - Learn how to (use) Focus - UX/UI keyboard first Don’t: - ? 20

Slide 21

Slide 21 text

Wearable development Do: - Small content - Simple navigation - SHOW TIME (please) - Static content - Use in-memory cache 21

Slide 22

Slide 22 text

Wearable development Don’t: - Make an image gallery - Heavy processing - Swipe right (but left) 22

Slide 23

Slide 23 text

Conclusion Promise, it’s almost done 23

Slide 24

Slide 24 text

Is it ready ? It works but not completely ready Packages (wear, wearable_rotary) 24 Moving further Communication with phone Impeller will be crazy

Slide 25

Slide 25 text

What is possible ? Should work WearOS: - Native keyboard - Native navigation - WatchFace ? 50% sure possible Shouldn’t work Apple TV and WatchOS Android Auto 25