Custom controls
Controls customization
For colors, etc, see "Styling". If you just want to do simple changes, you have some configuration options for the controls with BccmPlayerViewConfig:
Example:
BccmPlayerView(
controller,
config: BccmPlayerViewConfig(
controlsConfig: BccmPlayerControlsConfig(
playbackSpeeds: const [0.1, 0.2, 0.5, 1.0, 1.5, 2.0, 5.0],
hidePlaybackSpeed: false,
hideQualitySelector: false,
),
),
),
Advanced customization
You can set a custom controlsBuilder
.
Find "Custom controls" in the example project for an up-to-date example if this is outdated.
Example
import 'package:bccm_player/bccm_player.dart';
import 'package:flutter/material.dart';
class CustomControls extends StatelessWidget {
const CustomControls({super.key});
@override
Widget build(BuildContext context) {
return BccmPlayerView(
BccmPlayerController.primary,
config: BccmPlayerViewConfig(
controlsConfig: PlayerControlsConfig(
customBuilder: (context) => const MyControls(),
),
),
);
}
}
class MyControls extends StatelessWidget {
const MyControls({super.key});
@override
Widget build(BuildContext context) {
final viewController = BccmPlayerViewController.of(context);
return Theme(
data: Theme.of(context).copyWith(
iconTheme: Theme.of(context).iconTheme.copyWith(color: Colors.white),
),
child: ValueListenableBuilder<PlayerState>(
valueListenable: viewController.playerController,
builder: (context, state, widget) => Container(
alignment: Alignment.bottomCenter,
child: Container(
height: 50,
color: Colors.black,
alignment: Alignment.bottomCenter,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
if (state.playbackState == PlaybackState.playing)
IconButton(
onPressed: () {
viewController.playerController.pause();
},
icon: const Icon(Icons.pause),
),
if (state.playbackState == PlaybackState.paused)
IconButton(
onPressed: () {
viewController.playerController.play();
},
icon: const Icon(Icons.play_arrow),
),
IconButton(
onPressed: () {
viewController.playerController.seekTo(Duration(milliseconds: state.playbackPositionMs! - 20000));
},
icon: const Icon(Icons.skip_previous),
),
IconButton(
onPressed: () {
viewController.playerController.seekTo(Duration(milliseconds: state.playbackPositionMs! + 20000));
},
icon: const Icon(Icons.skip_next),
),
if (!viewController.isFullscreen)
IconButton(
onPressed: () {
viewController.enterFullscreen();
},
icon: const Icon(Icons.fullscreen),
),
if (viewController.isFullscreen)
IconButton(
onPressed: () {
viewController.exitFullscreen();
},
icon: const Icon(Icons.fullscreen_exit),
),
],
),
),
),
),
);
}
}