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)


Check out the link for the previous tutorial


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

Problems and solutions

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

  _ProverbDisplayState createState() => _ProverbDisplayState();

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

  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: [
                    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"


Recent posts