In this article, You can learn how to add support for your existing apps to run on Android TVs and how you can enable navigation using the remote control.

在本文中，您可以学习如何增加对现有应用程序的支持以在Android TV上运行，以及如何使用遥控器启用导航。

Note: This article is meant for developers who are already familiar with the basics of flutter

注意：本文适用于已经熟悉flutter基础知识的开发人员

Here, we will take the example of a modified version of the demo counter app that comes with Flutter.

在这里，我们将以Flutter随附的演示计数器应用程序的修改版本为例。

This is the code we will work with, In case you are not familiar with it.

这是我们将使用的代码，以防您不熟悉它。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';void main() {
  runApp(MyApp());
}class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'Flutter Demo Home Page'),
      );
    
  }
}class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);final String title;@override
  _MyHomePageState createState() => _MyHomePageState();
}class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }@override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton:
            FloatingActionButton(
              focusColor: Colors.green,
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            
        ));
  }
}

If you manage to install this app on an Android TV device or emulator, you can probably run the App. But, the App will not respond to your remote select button. In order to make this work, We have to wrap the MaterialApp with the Shortcuts Widget which allows us to assign an action to a button press.

如果您设法将此应用安装在Android TV设备或模拟器上，则可以运行该应用。 但是，该应用程序将不会响应您的远程选择按钮。 为了使这项工作有效，我们必须使用快捷方式小部件包装MaterialApp，该小部件允许我们将操作分配给按钮按下。

return Shortcuts(
      shortcuts: <LogicalKeySet, Intent>{
        LogicalKeySet(LogicalKeyboardKey.select): ActivateIntent(),
      },
      child: MaterialApp(
      ...
);

Now, Let’s add one more function to our App to develop a better understanding of the working of the app on TV devices. We will add a function to decrement the counter.

现在，让我们向我们的应用程序添加一个功能，以更好地了解该应用程序在电视设备上的工作方式。 我们将添加一个减少计数器的功能。

void _decrementCounter() {
    setState(() {
      _counter--;
    });
  }

And Let’s add one more floating action button to trigger this function. So, we will replace the original FloatingActionButton with a Row containing two FloatingActionButtons. We will use a SizedBox to provide some padding.

然后再添加一个浮动操作按钮来触发此功能。 因此，我们将用包含两个FloatingActionButtons的行替换原始的FloatingActionButton。 我们将使用SizedBox提供一些填充。

floatingActionButton: Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            FloatingActionButton(
              focusColor: Colors.green,
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),
            ),
            SizedBox(
              width: 10,
            ),
            FloatingActionButton(
              focusColor: Colors.red,
              onPressed: _decrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.remove),
            ),
          ],
        )

Note: Note that we added focusColor property. This is important in TV apps because they help the user identify which button is currently selected.

注意：请注意，我们添加了focusColor属性。 这在电视应用程序中很重要，因为它们可以帮助用户识别当前选择了哪个按钮。

Now we are done with writing Dart code, but we still have to modify a few settings for the android project.

现在我们已经完成了编写Dart代码的工作，但是我们仍然需要修改android项目的一些设置。

Configuring App for TV

为电视配置应用

TV devices display a banner instead of an app icon on the home screen. So, we have to create a banner with 320x180 px size, name it banner.png and copy it to android/app/src/main/res/drawable folder.

电视设备在主屏幕上显示横幅，而不显示应用程序图标。 因此，我们必须创建一个尺寸为320x180像素的横幅，将其命名为banner.png并将其复制到android / app / src / main / res / drawable文件夹中。

To add the banner to your app, describe the banner in the AndroidManifest.xml as follows:

要将横幅添加到您的应用程序，请在AndroidManifest.xml中描述横幅，如下所示：

<application
    android:name="io.flutter.app.FlutterApplication"
    android:label="mytv"
    android:banner="@drawable/banner"
    android:icon="@mipmap/ic_launcher" >
    ...
</application>

An application intended to run on TV devices must declare a launcher activity for TV in its manifest. It uses a LEANBACK_LAUNCHER intent filter to do this. This filter identifies your app as being enabled for TV, and lets Google Play identify it as a TV app. When a user selects your app on their TV home screen, this intent identifies which activity to launch.

打算在电视设备上运行的应用程序必须在清单中声明电视的启动器活动。 它使用LEANBACK_LAUNCHER意图过滤器执行此操作。 此过滤器会将您的应用标识为已启用电视功能，并让Google Play将其标识为电视应用。 当用户在其电视主屏幕上选择您的应用程序时，此意图将标识要启动的活动。

To enable this, add the bolded line to the intent-filter block in your AndroidManifest.xml file

要启用此功能，请将粗体行添加到AndroidManifest.xml文件中的intent-filter块中

<intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>

Now declare that your app uses the Leanback user interface required by Android TV. If you are developing an app that runs on mobile (phones, wearables, tablets, etc.) as well as Android TV, set the required attribute value to false. If you set the required attribute value to true, your app will run only on devices that use the Leanback UI.

现在，声明您的应用使用Android TV所需的Leanback用户界面。 如果您要开发在移动设备(手机，可穿戴设备，平板电脑等)以及Android TV上运行的应用程序，请将required属性值设置为false 。 如果将required属性值设置为true ，则您的应用程序将仅在使用Leanback UI的设备上运行。

<manifest>
    <uses-feature android:name="android.software.leanback"
        android:required="false" />
    ...
</manifest>

Applications that are intended to run on TV devices do not rely on touch screens for input. To make this clear, your TV app’s manifest must declare that the android.hardware.touchscreen feature is not required. This setting identifies your app as being able to work on a TV device, and is required for your app to be considered a TV app in Google Play.

旨在在电视设备上运行的应用程序不依赖于触摸屏进行输入。 为了清楚起见，您的电视应用程序清单必须声明不需要android.hardware.touchscreen功能。 此设置将您的应用标识为可以在电视设备上运行，并且在Google Play中将其视为电视应用是必需的。

<manifest>
    <uses-feature android:name="android.hardware.touchscreen"
              android:required="false" />
    ...
</manifest>

That’s it. You’ve completed setting up your app for Android TV. To find out more about android TV development, check out the official documentations here.

而已。 您已完成针对Android TV的应用设置。 要了解有关android TV开发的更多信息，请在此处查看官方文档。

You can see the sample project here.

您可以在此处看到示例项目。