Android TV Support with Flutter Framework

Last updated Sep 21, 2020


In this post, we will learn how to add TV support for the Flutter application.

TV apps don't have touch support, Navigations should be done by remote control.

Then how we will handle this Navigation in a flutter application with Remote control. 

For this, we have to use  Shortcuts widget

 

What is Shortcuts widget?

A widget that establishes an [ShortcutManager] to be used by its descendants
 when invoking an [Action] via a keyboard key combination that maps to an
 [Intent]

 

Note: If you are new to Flutter application development, Check How to create the First Flutter application.

 

Flutter TV Support

 

Install

Create a flutter application and update the Counter application code like below

import 'package:flutter/material.dart';

class TvScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.green,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyTvScreen(title: 'Flutter TV Demo App'),
    );

  }
}
class MyTvScreen extends StatefulWidget {
  MyTvScreen({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyTvScreenState createState() => _MyTvScreenState();
}
class _MyTvScreenState extends State {
  int _counter = 0;
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  void _derementCounter() {
    setState(() {
      if(_counter>0)
      _counter--;
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton:Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            FloatingActionButton(
              focusColor: Colors.green,
              onPressed: _incrementCounter,
              tooltip: 'Increment',
              child: Icon(Icons.add),

            ),
            FloatingActionButton(
              backgroundColor: Colors.red,
              focusColor: Colors.red,
              onPressed: _derementCounter,
              tooltip: 'Decrement',
              child: Icon(Icons.remove),

            )
          ],
        )
       );
  }
}

 

If we run an Android TV device or emulator, we can probably run the App. But, the App will not respond to our remote select button. To do this, we have to wrap the MaterialApp with the Shortcuts Widget which allows us to assign an action to a button press

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

 

 

 

Note: The focusColor property  is important in TV apps because it will help the user to identify which button is currently selected

 

Now we need to configure App for TV

Configuring App for TV

To display the app on the Home screen, for mobiles/tablets we will create icons with different DPIs but for TV we need to create a Banner with 320X180 px size.

The Icon name should be banner.png and add this banner inside android/app/src/main/res/drawable folder

 

Update Manifest file

Add Banner icon

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

 

Add Leanback support 

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. 

 

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

 

To support apps for TV we need to add LeanBack user interface support. IF we developing app that euns on mobile/tablets as well as Android TV, set the required attribute value to false, If we creating only for TV the set this value to true.

 

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

 

Now Lets' run an application on TV or emulator.

 

Other Flutter Examples


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

5370 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions