How to Build a Custom Video Player with Advanced Features in FlutterFlow

1import 'package:better_player/better_player.dart';
2
3class AdvancedPlayer extends StatefulWidget {
4  const AdvancedPlayer({
5    super.key,
6    this.width,
7    this.height,
8    required this.videoUrl,
9    this.video720Url,
10    this.video1080Url,
11    this.subtitleUrl,
12  });
13
14  final double? width;
15  final double? height;
16  final String videoUrl;
17  final String? video720Url;
18  final String? video1080Url;
19  final String? subtitleUrl;
20
21  @override
22  State<AdvancedPlayer> createState() => _AdvancedPlayerState();
23}
24
25class _AdvancedPlayerState extends State<AdvancedPlayer> {
26  late BetterPlayerController _controller;
27
28  @override
29  void initState() {
30    super.initState();
31    final config = BetterPlayerConfiguration(
32      autoPlay: false,
33      looping: false,
34      fit: BoxFit.contain,
35      controlsConfiguration: BetterPlayerControlsConfiguration(
36        enablePlaybackSpeed: true,
37        enableSubtitles: widget.subtitleUrl != null,
38        enableQualities: true,
39        enablePip: true,
40        playbackSpeedList: const [0.5, 0.75, 1.0, 1.25, 1.5, 2.0],
41      ),
42    );
43
44    final resolutions = <String, String>{
45      '360p': widget.videoUrl,
46    };
47    if (widget.video720Url != null) resolutions['720p'] = widget.video720Url!;
48    if (widget.video1080Url != null) resolutions['1080p'] = widget.video1080Url!;
49
50    final dataSource = BetterPlayerDataSource(
51      BetterPlayerDataSourceType.network,
52      widget.videoUrl,
53      resolutions: resolutions,
54      subtitles: widget.subtitleUrl != null
55          ? [
56              BetterPlayerSubtitlesSource(
57                type: BetterPlayerSubtitlesSourceType.network,
58                urls: [widget.subtitleUrl!],
59                name: 'English',
60              ),
61            ]
62          : null,
63    );
64
65    _controller = BetterPlayerController(
66      config,
67      betterPlayerDataSource: dataSource,
68    );
69  }
70
71  @override
72  void dispose() {
73    _controller.dispose();
74    super.dispose();
75  }
76
77  @override
78  Widget build(BuildContext context) {
79    return SizedBox(
80      width: widget.width ?? double.infinity,
81      height: widget.height ?? 250,
82      child: BetterPlayer(controller: _controller),
83    );
84  }
85}