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
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
[
{
"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
),
)
],
