In this tutorial, we are going to solve a problem one of our members from the technical team had to encounter while developing an application using flutter. Before getting into the details of the problem and how to solve it we will first give a little intro about flutter.
Flutter is an open-source UI software development kit created by Google. It is used to develop applications for Android, iOS, Linux, Mac, Windows, and the web from a single codebase.
Videos are everywhere – they can convey information more quickly than any other format. From YouTube and Instagram stories to app development courses, playing videos directly inside your app is becoming more and more needed.
How can we play videos in Flutter? There is a library directly from the Flutter team simply called video_player. This library, however, is completely bare-bones. The library built by flutter crashes and causes many errors during the execution of any application. While it can play videos, it’s up to you to add video playback controls and to style it.
Here is a better option that comes bundled with the UI as you’d expect both on Android and iOS – Chewie. Chewie uses the first-party video_player package behind the scenes. It only simplifies the process of video playback. This library acts as a wrapper and provides low-level access to video playback.
Project Setup
The video_player plugin, which is natively supported in the flutter, provides access to low-level video playback functionality.
For iOS, the video_player plugin uses AVPlayer to play videos. And for Android it uses ExoPlayer.
Using the video_player plugin, it is possible to play videos stored on the network, in the application as well as directly in the phone’s storage.
Importing packages
For Android
In your pubspec.yaml file within your Flutter Project define this library:
dependencies:
chewie: <latest_version>
video_player: <latest_version>
For IOS
To be able to play network videos, you need to tell iOS about your intentions of loading network data. A similar setup is also required for Android, but when you create a new app through the flutter create command, all the needed permissions are done for you.
Open <your_project>/ios/Runner/Info.plist and add the following code.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
...
<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
</dict>
</plist>
Chewie can play videos from three sources: assets, files, and network. You don’t need to write a lot of code to change the data source. Switching from an asset to a network video is a matter of just a few keystrokes. Let’s first take a look at assets.
Asset videos setup
Assets are simply files that are readily available for your app to use. They come bundled together with your app file after you build it for release.
To set up assets, simply create a folder at the root of your project and call it, for example, videos. Then drag your desired video file in there.
To let Flutter know about all the available assets, you have to specify them in the pubspec file.
pubspec.yaml
flutter:
uses-material-design: true
assets:
- videos/IntroVideo.mp4
Using the widget
Now we will start playing videos. For that Chewie provides its widget which is only a wrapper on top of the VideoPlayer which comes directly from the Flutter.
We want to play multiple videos displayed in a ListView, it’s going to be best to put all of the video-playing-related things into its widget. Also, because video player resources need to be released, you need to create a StatefulWidget to get hold of the dispose() method.
Chewie_list_item.dart
import 'package:chewie/chewie.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
class ChewieListItem extends StatefulWidget {
// This will contain the URL/asset path which we want to play
final VideoPlayerController videoPlayerController;
final bool looping;
ChewieListItem({
@required this.videoPlayerController,
this.looping,
Key key,
}) : super(key: key);
@override
_ChewieListItemState createState() => _ChewieListItemState();
}
class _ChewieListItemState extends State {
ChewieController _chewieController;
@override
void initState() {
super.initState();
// Wrapper on top of the videoPlayerController
_chewieController = ChewieController(
videoPlayerController: widget.videoPlayerController,
aspectRatio: 16 / 9,
// Prepare the video to be played and display the first frame
autoInitialize: true,
looping: widget.looping,
// Errors can occur for example when trying to play a video
// from a non-existent URL
errorBuilder: (context, errorMessage) {
return Center(
child: Text(
errorMessage,
style: TextStyle(color: Colors.white),
),
);
},
);
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Chewie(
controller: _chewieController,
),
);
}
@override
void dispose() {
super.dispose();
// IMPORTANT to dispose of all the used resources
widget.videoPlayerController.dispose();
_chewieController.dispose();
}
}
Play the Videos
To play the videos in listview all you have to do is create a page named “mypage”.
Main. dart
import 'package:chewie_prep/chewie_list_item.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
page: MyPage(),
);
}
}
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Video Player'),
),
body: ListView(
children: [
ChewieListItem(
videoPlayerController: VideoPlayerController.asset(
'videos/IntroVideo.mp4',
),
looping: true,
),
ChewieListItem(
videoPlayerController: VideoPlayerController.network(
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/table.mp4',
),
),
ChewieListItem(
// This URL doesn't exist - will display an error
videoPlayerController: VideoPlayerController.network(
'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/error.mp4',
),
),
],
),
);
}
}
Chewie is a Flutter package used for simplifying the process of playing videos. We hope you find this tutorial helpful. Let us know in the comments section! K2 blocks is a WordPress plugin developed by Pookidevs Technologies. You can contact us for a custom WordPress website, flutter application, and custom plugin development at our Official site.