Chewie Flutter Video Player Example

In this article, we are going to learn how to use chewie flutter package to play videos in flutter applications. We already used flutter video player to play videos without playback controls in flutter applications.

Flutter Video Player does not provide any video playback related controls. So if we use it, we need to add controls and style it according to our requirements. This package uses AVPlayer for iOS applications and ExoPlayer for android applications.

Using chewie flutter package, we can create custom playback controls to manage videos according to our specific requirements. We can also make different UIs for android and iOS platforms. So in this example, we are using both libraries chewie and video player to play and manage videos.

Chewie flutter package provides different functionalities such as mute and unmute, video speed, autoplay, video controls etc. Using this package, we can play videos from three sources : network, assets and file.

 

Add required dependencies in our pubspec.yaml file

chewie: ^1.0.0
video_player: ^2.1.1
 
 

Android Platform Changes for Chewie Flutter

If we play video from network, we need to add internet permission in AndroidManifest.xml file.

<uses-permission android:name=”android.permission.INTERNET”/>
 

If you are using http url instead of https and your device is running on api level 28 then you are getting “Cleartext HTTP traffic not permitted” error. To prevent this error, you need to add following line in application tag in AndroidManifest.xml file.

android:usesCleartextTraffic=”true”
 
 

iOS Platform Changes for Chewie Flutter

Same as android, we need to add keys in Info.plist file to play network videos in iOS applications. Add following keys in /ios/Runner/Info.plist file.

<key>NSAppTransportSecurity</key>
<dict>
<key>NSAllowsArbitraryLoads</key>
<true/>
</dict>
 
 

Create and Initialize VideoPlayerController

Using VideoPlayerController, we can define video source from which we can play video : asset, file or network. Here we define video url to play video from network. ChewieController has different attributes. First we can add our video player controller object.

autoplay attribute is used to play video automatically as it is displayed. looping attribute is used to play video over and over again. We can also use aspect ratio attribute for more customization in ChewieController class.

VideoPlayerController videoPlayerController;
ChewieController chewieController;

@override
void initState() {
    super.initState();
    initializeVideoPlayer();
}

Future<void> initializeVideoPlayer() async {
videoPlayerController = VideoPlayerController.network(‘https://assets.mixkit.co/videos/preview/mixkit-forest-stream-in-the-sunlight-529-large.mp4’);
await Future.wait([
    videoPlayerController.initialize()
]);
chewieController = ChewieController(
    videoPlayerController: videoPlayerController,
    autoPlay: true,
    looping: true,
);

 
 

Flutter Video Player UI

Container(
child: Center(
child: chewieController != null &&
chewieController.videoPlayerController.value.isInitialized
? Chewie(
    controller: chewieController,
)
: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
    CircularProgressIndicator(),
    SizedBox(height: 20),
    Text(‘Loading’),
],
),
),
)
 
 

Dispose Controllers

@override
void dispose() {
    videoPlayerController.dispose();
    chewieController.dispose();
    super.dispose();
}
 
 
chewie flutter
 
 

Leave a Reply