Flutter TV App - Video Player example

Last updated Sep 01, 2021

In this flutter tv app example we will learn how to play videos inside tv app. To play videos in Flutter TV app we are using the video_player plugin. In this example we will cover

Parse json data
Display List inside Listview
Play Video with TV Video Player

Before implement video player example we read about how to create Flutter TV Application in my previous article

Let's get started

Step 1: Create Flutter Application

Step 2: Add required pubspec.yaml file

dev_dependencies:
  flutter_test:
    sdk: flutter

  video_player: ^2.1.14

Step 3: Parse json data

We are adding sample video json data in video.dart file. To read this json data we are creating the model classes

class Channel{
  String title;
  String description;
  String thumb;
  List sources;
  Channel({required this.title,required this.description,required this.thumb,required this.sources});

   factory Channel.fromJson(Map<dynamic,dynamic> json){

    return Channel(
      title:json['title'],
      description:json['description'],
      thumb:json['thumb'],
      sources:json['sources'],
    );
  }
}

class ChannelsList{

  List channels;
  ChannelsList(this.channels);

  factory ChannelsList.fromJson(Map<dynamic,dynamic> json){
    var list=List.empty(growable: true);
    if (json['videos'] != null) {
      json['videos'].forEach((v) {
        final model = Channel.fromJson(v);
        list.add(model);
      });
    }
    return ChannelsList(list);
  }
}

To parse json data into model class will be done by

Future> loadChannels(){
    return Future.value(ChannelsList.fromJson(mediaJSON).channels);
}

Step 4: Display List data

 FutureBuilder(
  future: loadChannels(),
  builder: (BuildContext context, AsyncSnapshot> snapshot) {
    if(snapshot!.hasData)
      {
        var list=snapshot.data;
        return ListView.builder(
            itemCount: (list==null)?0:snapshot.data!.length,
            itemBuilder: (item,index){
          return MaterialButton(onPressed:(){
            Navigator.push(context, MaterialPageRoute(builder: (context){
              return MyTvScreen(url:snapshot.data![index].sources[0]);
            }));
          },child: Card(child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ListTile(leading:Image.network("http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/${snapshot.data![index].thumb}",height:100),title:Text(snapshot.data![index].title ),),
          )));
        });
      }
    return Container();
  },

),

Step 5: Play videos

To play videos to tv app we have creaetd a widget which will contains the VideoPlayer widget. This video player widget internally use the exoplayer plugin

/// Widget that displays the video controlled by [controller].
class VideoPlayer extends StatefulWidget {
  /// Uses the given [controller] for all video rendered in this widget.
  VideoPlayer(this.controller);

  /// The [VideoPlayerController] responsible for the video being rendered in
  /// this widget.
  final VideoPlayerController controller;

  @override
  _VideoPlayerState createState() => _VideoPlayerState();
}

Step 6: Let's run the application

Complete code for Flutter TV app video Player

import 'package:flutter/material.dart';

import 'package:video_player/video_player.dart';
class MyTvScreen extends StatefulWidget {

  final String url;
  MyTvScreen({required this.url});
  @override
  _MyTvScreenState createState() => _MyTvScreenState();
}
class _MyTvScreenState extends State {
  late VideoPlayerController _controller;


  @override
  void initState() {
    _controller = VideoPlayerController.network(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(
      appBar: AppBar(
        title: Text("TV Player"),
      ),
      body: 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,
          height: 50,
          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),),
                  ),
                ],
              ),
            ),
          ),
        ),
      ],
    );

  }
}

Conclusion:

In this Flutter TV app example we covered how to parse json data and play videos inside video player for flutter tv application

Article Contributed By :

4177 Views