How to create TV app using Flutter

In this blog, we will learn how to create Smart TV app using Flutter. TV apps use the same architecture as those for phones and tablets. This approach means you can build new TV apps based on what you already know about building apps for Android, or extend your existing apps to also run on TV devices.

However, the interaction model for TV is substantially different. To make your app successful on TV devices you need to make some additional changes apart from phones and tablets.

We have already built an Android TV app for the CS-Cart platform where you can check the complete workflow as well.

Read more about our Flutter app development services.

Below Are the things we need to set for the TV app.

Add Leanback Support In the Manifest file

&lt;manifest&gt;
    &lt;uses-feature android:name="android.software.leanback"
        android:required="true" /&gt;
    ...
&lt;/manifest&gt;
 &lt;intent-filter&gt;
        &lt;action android:name="android.intent.action.MAIN"/&gt;
        &lt;category  android:name="android.intent.category.LEANBACK_LAUNCHER"/&gt;
         &lt;category android:name="android.intent.category.LAUNCHER"/&gt;
 &lt;/intent-filter&gt;

<uses-feature android:name="android.software.leanback"

android:required="true" />

...

</manifest>

<intent-filter>

</intent-filter>

Set Touch screen False

&lt;manifest&gt;
    &lt;uses-feature android:name="android.hardware.touchscreen"
              android:required="false" /&gt;
    ...
&lt;/manifest&gt;

<uses-feature android:name="android.hardware.touchscreen"

android:required="false" />

...

</manifest>

TV Banner

Android TV app used a Banner instead of a launcher icon.
We need to create a banner with a pixel size of 320×180.
Add to your drawable folder and add to your manifest file as shown below.

&lt;application
  ...
    android:banner="@drawable/banner"
   &gt;
   ...
&lt;/application&gt;

<application

...

android:banner="@drawable/banner"

...

</application>

Sample App

In this sample App, we will make a video player app.
We will use some static sample video URL to show the list of videos and play a video.

Add the Below dependencies to your pubspec.yaml

 video_player: ^2.7.0
 cached_network_image: ^3.2.3

video_player: ^2.7.0

cached_network_image: ^3.2.3

main. dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'homescreen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {

    return Shortcuts(
      shortcuts: &lt;LogicalKeySet, Intent&gt;{
        LogicalKeySet(LogicalKeyboardKey.select): const ActivateIntent(),
      },
      child: MaterialApp(
        title: 'Webkul Tv App',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const HomeScreen(),
      ),
    );

  }
}

import 'package:flutter/material.dart';

import 'package:flutter/services.dart';

import 'homescreen.dart';

void main() {

runApp(const MyApp());

}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override

Widget build(BuildContext context) {

return Shortcuts(

shortcuts: <LogicalKeySet, Intent>{

LogicalKeySet(LogicalKeyboardKey.select): const ActivateIntent(),

child: MaterialApp(

title: 'Webkul Tv App',

debugShowCheckedModeBanner: false,

theme: ThemeData(

primarySwatch: Colors.blue,

home: const HomeScreen(),

);

}

HomScreen.dart




import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:webkul_tv_app/rawdata.dart';
import 'package:webkul_tv_app/videoplayerscreen.dart';



class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State&lt;HomeScreen&gt; createState() =&gt; _HomeScreen();
}

class _HomeScreen extends State&lt;HomeScreen&gt;
    with SingleTickerProviderStateMixin {


@override
  void initState() {
    
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(  title: const Text('Webkul Tv App'),),
        body :SingleChildScrollView(
          child:sampleVideoGrid()),
      )  
    );
  }

  Widget sampleVideoGrid() {
    return SingleChildScrollView(
      child: Column(
        children: &#091;
        
          GridView(
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3,
            ),
            children: images
                .map((url) =&gt; InkWell(
                      onTap: () {
                        Navigator.push(
                          context,
                          CupertinoPageRoute(
                            builder: (context) =&gt; VideoPlayerScreen(
                              url: links&#091;images.indexOf(url)],
                            ),
                          ),
                        );
                      },
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Image.network(
                          url,
                          height: 150,
                          width: 150,
                        ),
                      ),
                    ))
                .toList(),
          ),
        ],
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:webkul_tv_app/rawdata.dart';

import 'package:webkul_tv_app/videoplayerscreen.dart';

class HomeScreen extends StatefulWidget {

const HomeScreen({Key? key}) : super(key: key);

@override

State<HomeScreen> createState() => _HomeScreen();

}

class _HomeScreen extends State<HomeScreen>

with SingleTickerProviderStateMixin {

@override

void initState() {

super.initState();

}

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar( title: const Text('Webkul Tv App'),),

body :SingleChildScrollView(

child:sampleVideoGrid()),

)

);

}

Widget sampleVideoGrid() {

return SingleChildScrollView(

child: Column(

children: [

GridView(

shrinkWrap: true,

gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(

crossAxisCount: 3,

children: images

.map((url) => InkWell(

onTap: () {

Navigator.push(

context,

CupertinoPageRoute(

builder: (context) => VideoPlayerScreen(

url: links[images.indexOf(url)],

);

child: Padding(

padding: const EdgeInsets.all(8.0),

child: Image.network(

url,

height: 150,

width: 150,

))

.toList(),

);

}

VideoPlayerScreen.dart


  import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';

class VideoPlayerScreen extends StatefulWidget {

  final String? url;
  VideoPlayerScreen({required this.url});

  @override
  State&lt;StatefulWidget&gt; createState() =&gt;_VideoPlayerScreen();

}
class _VideoPlayerScreen extends State&lt;VideoPlayerScreen&gt; {
  late VideoPlayerController _controller;


  @override
  void initState() {
    _controller = VideoPlayerController.networkUrl(Uri.parse(widget.url??""));
    _controller.addListener(() {
      setState(() {});
    });
    _controller.setLooping(true);
    _controller.initialize().then((_) =&gt; setState(() {}));
    _controller.play();
  }
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }


  @override
  Widget build(BuildContext context) {
    
    return Scaffold(
      body: Center(
        child: SingleChildScrollView(
          child: Stack(
            alignment: Alignment.bottomCenter,
            children: &#091;
              Container(child: VideoPlayer(_controller),height:400,width: double.infinity,),
              _ControlsOverlay(controller: _controller),
              VideoProgressIndicator(_controller, allowScrubbing: true),


            ],
          ),
        ),
      ),

    );
  }

}
class _ControlsOverlay extends StatelessWidget {
  const _ControlsOverlay({Key? key, required this.controller})
      : super(key: key);

  static const _examplePlaybackRates = &#091;
    0.25,
    0.5,
    1.0,
    1.5,
    2.0,
    3.0,
    5.0,
    10.0,
  ];

  final VideoPlayerController controller;

  @override
  Widget build(BuildContext context) {
    return  Row(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.spaceAround,
      children: &#091;
        Container(
          color: Colors.black26,

          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: AnimatedSwitcher(
              duration: Duration(milliseconds: 50),
              reverseDuration: Duration(milliseconds: 200),
              child: Row(
                children: &#091;
                  MaterialButton(
                    onPressed: () async{
                      var position=   await controller.position;

                      controller.seekTo(Duration(seconds: position!.inSeconds-5));
                    },
                    child: Icon(
                      Icons.arrow_back_ios,
                      color: Colors.white,
                      size: 20.0,
                    ),
                  ),
                  SizedBox(width: 20,),
                  controller.value.isPlaying
                      ? MaterialButton(
                    child: Icon(
                      Icons.pause,
                      color: Colors.white,
                      size: 30.0,
                    ),
                    onPressed: () {
                      controller.value.isPlaying ? controller.pause() : controller.play();
                    },
                  )
                      : MaterialButton(
                    child: Icon(
                      Icons.play_arrow,
                      color: Colors.white,
                      size: 30.0,
                    ),
                    onPressed: () {
                      controller.value.isPlaying ? controller.pause() : controller.play();
                    },
                  ),
                  SizedBox(width: 20,),
                  MaterialButton(
                    onPressed: () async{
                      var position=   await controller.position;

                      controller.seekTo(Duration(seconds: position!.inSeconds+5));
                    },
                    child: Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.white,
                      size: 20.0,
                    ),
                  ),
                  SizedBox(width: 20,),
                  PopupMenuButton(
                    initialValue: controller.value.playbackSpeed,
                    tooltip: 'Playback speed',
                    color: Colors.white,
                    onSelected: (speed) {
                      controller.setPlaybackSpeed(speed);
                    },
                    itemBuilder: (context) {
                      return &#091;
                        for (final speed in _examplePlaybackRates)
                          PopupMenuItem(
                            value: speed,
                            child: Text('${speed}x',),
                          )
                      ];
                    },
                    child: Text('${controller.value.playbackSpeed}x',style: TextStyle(color: Colors.white),),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );

  }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';

class VideoPlayerScreen extends StatefulWidget {

final String? url;

VideoPlayerScreen({required this.url});

@override

State<StatefulWidget> createState() =>_VideoPlayerScreen();

}

class _VideoPlayerScreen extends State<VideoPlayerScreen> {

late VideoPlayerController _controller;

@override

void initState() {

_controller = VideoPlayerController.networkUrl(Uri.parse(widget.url??""));

_controller.addListener(() {

setState(() {});

});

_controller.setLooping(true);

_controller.initialize().then((_) => setState(() {}));

_controller.play();

}

@override

void dispose() {

_controller.dispose();

super.dispose();

}

@override

Widget build(BuildContext context) {

return Scaffold(

body: Center(

child: SingleChildScrollView(

child: Stack(

alignment: Alignment.bottomCenter,

children: [

Container(child: VideoPlayer(_controller),height:400,width: double.infinity,),

_ControlsOverlay(controller: _controller),

VideoProgressIndicator(_controller, allowScrubbing: true),

);

}

class _ControlsOverlay extends StatelessWidget {

const _ControlsOverlay({Key? key, required this.controller})

: super(key: key);

static const _examplePlaybackRates = [

0.25,

0.5,

1.0,

1.5,

2.0,

3.0,

5.0,

10.0,

];

final VideoPlayerController controller;

@override

Widget build(BuildContext context) {

return Row(

crossAxisAlignment: CrossAxisAlignment.center,

mainAxisAlignment: MainAxisAlignment.spaceAround,

children: [

Container(

color: Colors.black26,

child: Padding(

padding: const EdgeInsets.all(8.0),

child: AnimatedSwitcher(

duration: Duration(milliseconds: 50),

reverseDuration: Duration(milliseconds: 200),

child: Row(

children: [

MaterialButton(

onPressed: () async{

var position= await controller.position;

controller.seekTo(Duration(seconds: position!.inSeconds-5));

child: Icon(

Icons.arrow_back_ios,

color: Colors.white,

size: 20.0,

SizedBox(width: 20,),

controller.value.isPlaying

? MaterialButton(

child: Icon(

Icons.pause,

color: Colors.white,

size: 30.0,

onPressed: () {

controller.value.isPlaying ? controller.pause() : controller.play();

)

: MaterialButton(

child: Icon(

Icons.play_arrow,

color: Colors.white,

size: 30.0,

onPressed: () {

controller.value.isPlaying ? controller.pause() : controller.play();

SizedBox(width: 20,),

MaterialButton(

onPressed: () async{

var position= await controller.position;

controller.seekTo(Duration(seconds: position!.inSeconds+5));

child: Icon(

Icons.arrow_forward_ios,

color: Colors.white,

size: 20.0,

SizedBox(width: 20,),

PopupMenuButton(

initialValue: controller.value.playbackSpeed,

tooltip: 'Playback speed',

color: Colors.white,

onSelected: (speed) {

controller.setPlaybackSpeed(speed);

itemBuilder: (context) {

return [

for (final speed in _examplePlaybackRates)

PopupMenuItem(

value: speed,

child: Text('${speed}x',),

)

];

child: Text('${controller.value.playbackSpeed}x',style: TextStyle(color: Colors.white),),

);

}

Rawdata.dart

List&lt;String&gt; images = &#091;
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerJoyrides.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerMeltdowns.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/Sintel.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/SubaruOutbackOnStreetAndDirt.jpg",
  "https://storage.googleapis.com/gtv-videos-bucket/sample/images/TearsOfSteel.jpg"
];
    
    List&lt;String&gt; links = &#091;
      "https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/Sintel.jpg",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4",
      "https://storage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"
    ];

List<String> images = [

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ElephantsDream.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerBlazes.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerEscapes.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerFun.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerJoyrides.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/ForBiggerMeltdowns.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/Sintel.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/SubaruOutbackOnStreetAndDirt.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/images/TearsOfSteel.jpg"

];

List<String> links = [

"https://storage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/Sintel.jpg",

"https://storage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4",

"https://storage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4"

];

Now our sample app is ready to run.

Conclusion :

Finally, Let’s check the app output.

Thanks for reading this Article. Feel free to share your ideas or any feedback.

Pankaj Tyagi

29 Feb, 2024
Updated by - Pankaj Tyagi
30 Nov, 2023
Updated by - Pankaj Tyagi

. . .

8 comments

pk 5 months ago

This article you missed to add the correct videoplayerscreen.dart file. How can I get it?

Pankaj Tyagi (Moderator) 5 months ago
Hello
Thanks for your comment.
We have added VideoPlayerScreen.dart file in the article.
Please check.

Reply
- pk 5 months ago
  Thank you
  
  Reply
  - Pankaj Tyagi (Moderator) 5 months ago
    Thanks for your response.
    If you have any query or suggestion then please do let us know.
    
    Reply

fun 4 months ago

This article you missed to add the correct package:video_player/video_player.dart file. How can I get it?

Pankaj Tyagi (Moderator) 4 months ago
Please add below Dependency to your project and import it to file.
video_player: ^2.7.0

Reply

oswaldo guerrero 2 months ago

I have been trying to do this for a while, I have run your entire exercise as is and everything is very good!, but when I try to send it to the play store, the app is rejected, and it tells me… The architecture of the app or the requested options are not compatible with this device, what could be the fault? The same thing happened to me with an app I made, I learned to use focus, etc., but it always says rejected, could you give me some guidance please?
Do you give any advice?

Spanish:
llevo rato intentando hacer esto, he corrido todo tu ejercicio tal cual y todo muy bien!, pero cuando intento enviarla a la play store, me rechazan la app, y me dice… La arquitectura de la app o las opciones solicitadas no son compatibles con este dispositivo, cual podria ser la falla ? me ha pasado lo mismo con un app que hice , aprendi a usar el focus, etc, pero siempre me dice rechazada, podrias darme alguna orientacion por favor ?

Pankaj Tyagi (Moderator) 2 months ago
Hello,
There can be various reasons for the rejection of App on the PlayStore.
We recommend checking permissions in your manifest file.
Make sure that you are not using any permissions or feature that don’t support TV hardware.
please also check “android.software.leanback” it should be required=”true”.

If you want any customisable Flutter app, then feel free to reach our sales team at [email protected]

Thanks

Reply

How to create TV app using Flutter

Below Are the things we need to set for the TV app.

Add Leanback Support In the Manifest file

Set Touch screen False

TV Banner

Sample App

Add the Below dependencies to your pubspec.yaml

main. dart

HomScreen.dart

VideoPlayerScreen.dart

Rawdata.dart

Conclusion :

Leave a Comment Cancel Reply

8 comments

Message Sent!