Последнее обновление:
Поддержка Android TV

Как добавить поддержку Android TV в приложение написанное на Flutter

Flutter

Из этой статьи вы узнаете, как добавить в  существующее приложение поддержку для работы на телевизорах Android и как включить навигацию с помощью пульта дистанционного управления.

Эта статья предназначена для разработчиков, которые уже знакомы с основами флаттера.

За основу возьмем демонстрационное приложение "Счетчик", которое поставляется по умолчанию при создании нового проекта во фреймворке.


Это код, с которым мы будем работать, если вы с ним не знакомы.

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),
            
        ));
  }
}

Если вам удастся установить это приложение на устройство Android TV или эмулятор, вы, вероятно, сможете запустить это приложение. Но приложение не будет ни на что реагировать. Чтобы все работало как надо, мы должны обернуть MaterialApp виджетом ярлыков, который позволяет нам назначать действие для нажатия кнопки.

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

Теперь давайте добавим еще одну функцию в наше приложение, чтобы лучше понять, как оно работает на телевизионных устройствах. Мы добавим функцию для уменьшения счетчика.

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

И давайте добавим еще одну плавающую кнопку, чтобы активировать эту функцию. Итак, мы заменим исходный FloatingActionButton строкой, содержащей два элемента 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),
            ),
          ],
        )

Обратите внимание, что мы добавили свойство focusColor. Это важно для ТВ-приложений, поскольку это позволит пользователю видеть, какая кнопка выбрана в данный момент.

С кодом закончено, но нам еще нужно изменить некоторые настройки для проекта Android.

Конфигурация приложения для ТВ

Телевизионные устройства отображают баннер вместо значка приложения на главном экране. Итак, нам нужно создать баннер размером 320x180 пикселей, назвать его banner.png и скопировать в папку android/app/src/main/res/drawable folder.

Чтобы добавить баннер в ваше приложение, пропишите баннер в AndroidManifest.xml следующим образом:

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

Приложение, предназначенное для запуска на телевизионных устройствах, должно прямо объявить об этом в своем манифесте. Для этого используется фильтр намерений LEANBACK_LAUNCHER. Этот фильтр определяет, что ваше приложение поддерживает ТВ, и позволяет Google Play идентифицировать его как ТВ-приложение. А когда пользователь выбирает ваше приложение на главном экране телевизора, это же намерение определяет, какое действие нужно запустить.

Чтобы включить это, добавьте строку в блок intent-filter в вашем файле AndroidManifest.xml.

   <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>

Теперь объявите, что ваше приложение использует пользовательский интерфейс Leanback, необходимый для Android TV. Если вы разрабатываете приложение, которое работает на мобильных устройствах (телефонах, носимых устройствах, планшетах и т. д.), А также на Android TV, установите для обязательного атрибута значение false. Если вы установите для обязательного атрибута значение true, ваше приложение будет работать только на устройствах, которые используют Leanback UI.

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

Приложения, предназначенные для работы на телевизионных устройствах, не используют сенсорные экраны для ввода. Чтобы это было ясно, в манифесте вашего ТВ-приложения должно быть указано, что функция android.hardware.touchscreen не требуется. Этот параметр определяет, что ваше приложение может работать на телевизионном устройстве, и необходим для того, чтобы ваше приложение считалось телевизионным приложением в Google Play.

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

Это все. Настройку приложения для Android TV можно считать законченной. Чтобы узнать больше о разработке Android TV, ознакомьтесь с официальной документацией здесь.

Комментарии