Learn how to develop Flutter TV for Android

preface

The company recently added a new business, applying the existing Flutter Android project to TV, and that’s where Asscre’s job came in.

This article describes two ways to implement Flutter for TV. There are limited capabilities of Flutter

That what, big brother, first click “like” + favorites! Hey hey

The development train of thought

Before development, let’s set our thinking.

That is, how to make the Settings for the least intrusive, best performance and higher playability of the original program code.

So, based on the Settings above, we find two things in the Flutter Widget:

• RawKeyboardListener
• InkWell and other Android TV configurations

The first effect

More playable and malleableRawKeyboardListenerSolution effect

Minimal modification to the original programInkWellAnd other Android TV configuration solutions

The development details

More playable and malleableRawKeyboardListenerThe solution

Using RawKeyboardListener

RawKeyboardListener(
  focusNode: d.focusNode, / / configuration focusNode
  onKey: (RawKeyEvent event) =>
      context.read<HomePageContentWidgetProvider>().focusEventHandler(event, context, d), // Monitor and handle special events
  child: Container(
    height: 190,
    width: 190,
    decoration: BoxDecoration(
      border: Border.all(
          width: 2,
          color: d.focusNode.hasFocus ? Colors.blue : Colors.transparent),
      borderRadius: BorderRadius.circular(20),
      color: Colors.white.withAlpha(20),
    ),
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Image.asset(
          d.img,
          height: 80,
        ),
        SizedBox(height: 20),
        Text(
          d.name,
          style: TextStyle(
            color: Colors.white,
            fontSize: 32() [() [() [() [()Copy the code

The Provider layer handles events

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:tv_test/pages/memory_page/memory_page.dart';

import 'package:flutter_screenutil/flutter_screenutil.dart';

class HomePageContentWidgetProvider
    with ChangeNotifier {
  bool init = false;
  double maxWScreen = 0; // The maximum distance from the button to the right of the screen
  double minWScreen = 60.w; // The button is far from the left edge of the screen

  final List<HomePageMakeBtn> makeBtnList = [
    HomePageMakeBtn('lib/assets/img/youtube.png'.'You Tube'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/apple.png'.'Apple'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/facebook.png'.'Facebook'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/douyin.png'.'Tik Tok'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/mi.png'.'MI'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/huawei.png'.'Hua Wei'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/youtube.png'.'TTT'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/apple.png'.'DDDD'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/facebook.png'.'FFFF'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/douyin.png'.'AAAA'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/mi.png'.'QQQQQ'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/huawei.png'.'WWWW'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/youtube.png'.'EEEEE'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/apple.png'.'RRRRR'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/facebook.png'.'YYYYYY'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/douyin.png'.'UUUUUU'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/mi.png'.'SSSSS'.' ', FocusNode()),
    HomePageMakeBtn('lib/assets/img/huawei.png'.'VVVV'.' ', FocusNode()),
  ];

  HomePageContentWidgetProvider(BuildContext context) {
    maxWScreen = MediaQuery.of(context).size.width - 246.w;
    // setMakeFocusAddListener();
    if(! init) { makeBtnList.first.focusNode.requestFocus(); init =true;
    }
  }

  setMakeFocusAddListener() {
    for (int i = 0; i < makeBtnList.length; i++) {
      makeBtnList[i].focusNode.addListener(() {
        if (makeBtnList[i].focusNode.hasFocus) {
          // notifyListeners();
          print(
              '= = = =${makeBtnList[i].name} : ${makeBtnList[i].focusNode.hasFocus}'); }}); } } setMakeFocusDispose() {for (var item in makeBtnList) {
      item.focusNode.removeListener(() {});
      item.focusNode.dispose();
    }
  }

  focusEventHandler(
      RawKeyEvent event, BuildContext context, HomePageMakeBtn param) async {
    /// Handles only events when a key is pressed
    if (event.data is RawKeyEventDataAndroid &&
        event.runtimeType.toString() == 'RawKeyDownEvent') {
      CustomRawKeyEventDataAndroid _d =
          CustomRawKeyEventDataAndroid.format(event.data);

      /// Handles pressing the OK key and the center key
      if (_d.keyCode == 23 || _d.keyCode == 66) {
        Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => MemoryPage(title: param.name)));
      } else {
        // for (var e in makeBtnList) {
        // print('${e.name} : ${e.focusNode.hasFocus}');
        // }

        /// The left key is processed
        if (_d.keyCode == 21) {
          await keyCodeDpadLeft(context, param);
        }

        /// Right click processing
        if (_d.keyCode == 22) {
          awaitkeyCodeDpadRight(context, param); } notifyListeners(); }}}/// The left key is processed
  keyCodeDpadLeft(BuildContext context, HomePageMakeBtn param) async {
    /// Primary boundary processing
    final int _idx = makeBtnList.indexWhere((e) => e == param);
    if (_idx == 0) return;
    final int _nextIndex = _idx + 1;
    if ((_nextIndex % 7) = =1) {
      HomePageMakeBtn _nextNode = makeBtnList[_idx - 1];
      print(_nextNode.name);
      await Future.delayed(const Duration(milliseconds: 20)); _nextNode.focusNode.requestFocus(); }}/// Right click processing
  keyCodeDpadRight(BuildContext context, HomePageMakeBtn param) async {
    final int _idx = makeBtnList.indexWhere((e) => e == param);

    /// Last bit boundary processing
    if (_idx == (makeBtnList.length - 1)) return;

    final int _nextIndex = _idx + 1;
    if ((_nextIndex % 7) = =0) {
      HomePageMakeBtn _nextNode = makeBtnList[_nextIndex];
      await Future.delayed(const Duration(milliseconds: 20)); _nextNode.focusNode.requestFocus(); }}@override
  void dispose() {
    setMakeFocusDispose();
    super.dispose(); }}class HomePageMakeBtn {
  final String img;
  final String name;
  final String routerName;
  final FocusNode focusNode;

  HomePageMakeBtn(this.img, this.name, this.routerName, this.focusNode);
}

class CustomRawKeyEventDataAndroid {
  final int flags;
  final int codePoint;
  final int plainCodePoint;

  /// case 19: KEY_UP
  /// case 20: KEY_DOWN
  /// case 21: KEY_LEFT
  /// case 22: KEY_RIGHT
  /// case 23: KEY_CENTER
  final int keyCode;
  final int scanCode;
  final int metaState;

  CustomRawKeyEventDataAndroid(this.flags, this.codePoint, this.plainCodePoint,
      this.keyCode, this.scanCode, this.metaState);

  static CustomRawKeyEventDataAndroid format(d) {
    returnCustomRawKeyEventDataAndroid(d.flags, d.codePoint, d.plainCodePoint, d.keyCode, d.scanCode, d.metaState); }}Copy the code

Pay attention to

We can see that we use it for left and right keys

Why is that?

This is because the Flutter mechanism will first trigger the requestFocus once and then the requestFocus twice, which conflicts with our expectation.

Such as:

• When using the end of the button to the right, the system triggers focus to UUUUU this button, our actual expectation is to YYYYY.

• When using the key head to the left, it will also cross two focuses.

So far Asscre has not found a good solution, but using await Future Delayed can relieve the inhuman operation.

Minimal modification to the original programInkWellAnd other Android TV configuration solutions

First, we need to set up in androidmanifest.xmlLEANBACK_LAUNCHERTell the platform that our application is a TV application

<intent-filter>
    <action android:name="android.intent.action.MAIN"/>
    <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>// Add this sentence<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
Copy the code

We then add in the Main entry fileShortcutsFor our program to respond to our remote control commands.

returnShortcuts( shortcuts: <LogicalKeySet, Intent>{ LogicalKeySet(LogicalKeyboardKey.select): ActivateIntent(), }, child: MaterialApp( ... ) ;Copy the code

Finally, useInkWellTo get the focus setting user remote click effect, whichfocusColorHelp us remind the user of the location of the button at this time.

    return Material(
      color: Colors.white.withAlpha(20),
      child: InkWell(
        focusColor: Colors.deepOrange.withAlpha(80),
        onTap: () => Navigator.of(context)
            .push(MaterialPageRoute(builder: (_) => MemoryPage(title: d.name))),
        child: SizedBox(
          height: 190,
          width: 190,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset(
                d.img,
                height: 80,
              ),
              SizedBox(height: 20),
              Text(
                d.name,
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 32,),),),),),),);Copy the code

conclusion

You can choose one of the two solutions according to your own (boss) preferences or business needs.

The RawKeyboardListener solution is recommended for complex customizations. For example, when a key event is triggered, the focus widget can zoom in, fade out, and so on, which can help improve the user experience.

However, with existing business logic, InkWell’s solution described above could be used with a few adjustments.

File reference

TV keyCode,