How to Create a Custom Video Player for Your FlutterFlow App

1import 'package:video_player/video_player.dart';
2import 'package:chewie/chewie.dart';
3
4class AdvancedVideoPlayer extends StatefulWidget {
5  const AdvancedVideoPlayer({
6    super.key,
7    this.width,
8    this.height,
9    required this.videoUrl,
10    this.autoPlay,
11    this.looping,
12  });
13
14  final double? width;
15  final double? height;
16  final String videoUrl;
17  final bool? autoPlay;
18  final bool? looping;
19
20  @override
21  State<AdvancedVideoPlayer> createState() => _AdvancedVideoPlayerState();
22}
23
24class _AdvancedVideoPlayerState extends State<AdvancedVideoPlayer> {
25  late VideoPlayerController _videoController;
26  ChewieController? _chewieController;
27  bool _hasError = false;
28
29  @override
30  void initState() {
31    super.initState();
32    _videoController = VideoPlayerController.networkUrl(
33      Uri.parse(widget.videoUrl),
34    )..initialize().then((_) {
35        _chewieController = ChewieController(
36          videoPlayerController: _videoController,
37          autoPlay: widget.autoPlay ?? false,
38          looping: widget.looping ?? false,
39          allowFullScreen: true,
40          allowPlaybackSpeedChanging: true,
41          playbackSpeeds: [0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
42          errorBuilder: (context, errorMessage) {
43            return Center(
44              child: Text(
45                'Video failed to load',
46                style: TextStyle(color: Colors.white),
47              ),
48            );
49          },
50        );
51        setState(() {});
52      }).catchError((error) {
53        setState(() => _hasError = true);
54      });
55  }
56
57  @override
58  void dispose() {
59    _videoController.dispose();
60    _chewieController?.dispose();
61    super.dispose();
62  }
63
64  @override
65  Widget build(BuildContext context) {
66    if (_hasError) {
67      return SizedBox(
68        width: widget.width ?? double.infinity,
69        height: widget.height ?? 250,
70        child: const Center(child: Text('Failed to load video')),
71      );
72    }
73    return SizedBox(
74      width: widget.width ?? double.infinity,
75      height: widget.height ?? 250,
76      child: _chewieController != null
77          ? Chewie(controller: _chewieController!)
78          : const Center(child: CircularProgressIndicator()),
79    );
80  }
81}