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
   

   View Slide

2. Quick reminder
   TV & Wearable
   Project
   Demo
   Feedbacks
   Conclusion
   2
   Summary
   

   View Slide

3. Quick reminder
   A complete one
   3
   

   View Slide

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
   

   View Slide

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
   

   View Slide

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
   

   View Slide

7. TV & Wearable
   Very particular devices
   7
   

   View Slide

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
   

   View Slide

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
   

   View Slide

10. Google Pixel Watch
    Google TV
    Development environment
    Debugging over-wifi
    adb connect
    Optional:
    android:name="android.intent.ca
    tegory.LEANBACK_LAUNCHER" />
    Debugging over-wifi
    adb pair
    adb connect
    10
    

    View Slide

11. Project
    News cross-platform
    11
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. Demo
    And its effects
    17
    

    View Slide

18. Feedbacks
    There’s a lot to say
    18
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. Conclusion
    Promise, it’s almost done
    23
    

    View Slide

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

    View Slide

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
    

    View Slide

26. Thank you
    26
    

    View Slide

27. Q U E S T I O N S ?
    27
    discord.fluttermtl.dev
    /in/taingbilly
    

    View Slide