Flutter video player step by step with controls

We will do a flutter video player tutorial with controls step by step.

We will cover video player controls, aspect ratio, load videos from network using json files, control video auido, play next video and previous video.

We are not going to use chewie video player. We will do all controls with the video player.

Check out the link for the starter code(video player starter code only)

https://www.dbestech.com/video_player_app_new_starter.zip

Check out the link for the previous tutorial

https://youtu.be/svQOxQde0bg

Paid code is Flutter latest 3.7.0

Get the complete code and ui from Patreon

Get the complete code and ui from Buymecoffee

The complete flutter video player tutorial is below

We will cover the below aspects of video player

1. Loading Videos From JSON File

2. Desgin Video Player List UI

3. Changing Video Index

4. Installing the Plugin

5. Play Video

6. Pause Video

7. Resume Video

8. Mute and Unmute Audio

9. Play Next and Previous Videos

10. Customized Slider

11. Show Video Time on Sider

12. GetX Snackbar for Message to Users

For video player we have the video_player plugins. 

For basic pop up messages we have used Getx as snackbar pop up

Problems and solutions

1. JSON file laoding problems

If json file doesn't load during second time app boot up or start, then we need to load json file using FutureBuilder

import 'dart:convert'; //(jsonDecode)

import 'package:flutter/material.dart';
import 'package:flutter/services.dart'; // (loadJson)

class ProverbDisplay extends StatefulWidget {
  final int myId;
  final String myCountry;

  const ProverbDisplay(this.myId, this.myCountry);

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

class _ProverbDisplayState extends State<ProverbDisplay> {
  Future getJsonProverbFuture = getJsonProverb();

  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: getJsonProverbFuture,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return Text('Loading...');
          } else {
            return Container(
              color: Colors.blue,
              height: 250,
              child: Row(
                children: [
                  Container(
                    width: 300,
                    child: PageView.builder(itemBuilder: (context, index) {
                      return Text("${snapshot.data}");
                    }),
                  ),
                ],
              ),
            );
          }
        });
  }
}

//Get JSON
Future getJsonProverb() async {
  final String rawJson = await rootBundle.loadString('assets/json/data.json');
  return await jsonDecode(rawJson);
}

Change ProverbDisplay and getJsonProverb() using new names as you want.

Second time, json might not load because

You are executing to load Json file in init state, but the function might not complete before your build function runs. Since the function has not complete json object or list could still be null. What you should do is ensure that your future completes, then only render the widget. You can achieve this by using a future builder

Video json file

[
  {
    "title": "Squat and Walk",
    "time": "45 seconds",
    "thumbnail": "assets/squat1.jpg",
    "videoUrl": "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"
  },
  {
    "title": "Plie Squat and Heel Raises",
    "time": "55 seconds",
    "thumbnail": "assets/squat2.jpg",
    "videoUrl": "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"
  },
  {
    "title": "Squat Kickback",
    "time": "60 seconds",
    "thumbnail": "assets/squat3.jpg",
    "videoUrl": "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"
  },
  {
    "title": "Squat with Side Leg Lift",
    "time": "120 seconds",
    "thumbnail": "assets/squat4.jpg",
    "videoUrl": "https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"
  }

]

2. ElevatedButton instead of FlatButton

With Flutter latest version use ElevatedButton instead of FlatButton in the video player. FlatButton is deprecated and with latest Flutter 3.3.3 or above you won't find FlatButton here.

3. Overflow issues on "Resistent band, kettebell"

So solve this wrap your Container() widget using Expanded widget. And also set Text() property like below

    Text(
                              "Resistent band, kettebell",
                              overflow: TextOverflow.fade,
                              maxLines: 1,
                              softWrap: false,
                              style: TextStyle(
                                  fontSize: 16,
                                  color:color.AppColor.secondPageIconColor
                              ),
                            )
                          ],