Table of Contents
Chewie Player :
Get started with the beautiful, simple and stunning video player implementation in your flutter app with Chewie.
In this part of the tutorial let us see the detailed implementation.Such that you can implement a video player that can work with features like fast forward, backward speed adjustments, volume and much more.
Such a customisable player will help you suit your app requirements accurately and also have a look at our previous implementations if you found them interesting here.
pubspec.yaml :
Add the required dependencies to your project.
chewie: ^1.7.4
video_player: ^2.8.2
main.dart :
import 'package:flutter/material.dart';
import 'package:chewie/chewie.dart';
import 'package:video_player/video_player.dart';
void main() async
runApp(const MyApp());
class MyApp extends StatelessWidget
const MyApp(Key? key) : super(key: key);
@override
Widget build(BuildContext context)
WidgetsFlutterBinding.ensureInitialized();
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("chewie video player")),
body: Column(
children: [
PlayerWidget(),
],
),
),
);
class PlayerWidget extends StatefulWidget
@override
_PlayerWidgetState createState() => _PlayerWidgetState();
class _PlayerWidgetState extends State<PlayerWidget>
late VideoPlayerController videoPlayerController;
late ChewieController chewieController;
bool isVideoInitialized = false;
@override
void initState()
super.initState();
videoPlayerController = VideoPlayerController.networkUrl(Uri.parse("https://flutter.github.io/assets-for-api-docs/assets/videos/butterfly.mp4"));
chewieController = ChewieController(
videoPlayerController: videoPlayerController,
autoPlay: true,
looping: true,
);
videoPlayerController.initialize().then((_)
setState(()
isVideoInitialized = true;
);
);
@override
void dispose()
videoPlayerController.dispose();
chewieController.dispose();
super.dispose();
@override
Widget build(BuildContext context)
return LayoutBuilder(
builder: (context, constraints)
if (isVideoInitialized)
return AspectRatio(
aspectRatio: videoPlayerController.value.aspectRatio,
child: Chewie(
controller: chewieController,
),
);
else
return const CircularProgressIndicator();
,
);
If you have any query’s in this chewie player implementation do let us know in the comment section below. If you like this tutorial do like and shareus for more interesting updates.
