[Flutter] flutter better_player custom controls problem

i'm implementing custom controls for flutter better_player widget, it worked fine but the problem is that the custom controls are stuck on screen (always visible), unlike the default material or cupertino controls which visibility can be toggled.

BetterPlayerController? _betterPlayerController;

@override
void initState() {
_betterPlayerController = BetterPlayerController(
BetterPlayerConfiguration(
controlsConfiguration: BetterPlayerControlsConfiguration(
playerTheme: BetterPlayerTheme.custom,
customControlsBuilder: (controller, onControlsVisibilityChanged) =>
// I believe onControlsVisibilityChanged is responsible for visibility toggle
CustomControlsWidget(
controller: controller,
onControlsVisibilityChanged: onControlsVisibilityChanged),
),
),
//dataSource etc...
);

super.initState();
}

@override
Widget build(BuildContext context) {
final provider = Provider.of<SeriesVideoProvider>(context);
final seriesVideo = provider.seriesVideo;
final mediaQuery = MediaQuery.sizeOf(context);
print(mediaQuery.width);

return Scaffold(
backgroundColor: Colors.black,
body: seriesVideo == null
? kProgressIndicator
: _betterPlayerController != null
? Center(
child: Stack(
alignment: AlignmentDirectional.center,
children: [
AspectRatio(
aspectRatio: 16 / 9,
child:
BetterPlayer(controller: _betterPlayerController!),
),

Align(
alignment: Alignment.topLeft,
child: Container(
width: mediaQuery.width / 12,
margin: EdgeInsets.only(left: mediaQuery.width / 15),
child: Stack(children: [
ClipRRect(
child: BackdropFilter(
filter:
ImageFilter.blur(sigmaX: 10, sigmaY: 10),
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: mediaQuery.width / 90,
vertical: mediaQuery.height / 90),
child: Text(
'Seriez',
style: GoogleFonts.cairo(
fontSize: 15,
color: Colors.white,
),
),
),
),
),
]),
),
),
],
),
)
: kProgressIndicator,
);
}


and this is my custom controls widget:

class CustomControlsWidget extends StatefulWidget {
final BetterPlayerController? controller;
final Function(bool visbility)? onControlsVisibilityChanged;

const CustomControlsWidget(
{super.key, this.controller, this.onControlsVisibilityChanged});

@override
State<CustomControlsWidget> createState() => _CustomControlsWidgetState();
}

class _CustomControlsWidgetState extends State<CustomControlsWidget> {



@override
Widget build(BuildContext context) {
widget.onControlsVisibilityChanged;

return Container(
height: 50,
decoration: BoxDecoration(
color: Colors.purple.withOpacity(0.2),
borderRadius: BorderRadius.circular(15),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
InkWell(
onTap: () async {
Duration? videoDuration =
await widget.controller!.videoPlayerController!.position;
setState(() {
if (widget.controller!.isPlaying()!) {
Duration rewindDuration =
Duration(seconds: (videoDuration!.inSeconds - 2));
if (rewindDuration <
widget
.controller!.videoPlayerController!.value.duration!) {
widget.controller!.seekTo(Duration(seconds: 0));
} else {
widget.controller!.seekTo(rewindDuration);
}
}
});
},
child: Icon(
Icons.fast_rewind,
color: Colors.white,
),
),
InkWell(
onTap: () {
setState(() {
if (widget.controller!.isPlaying()!)
widget.controller!.pause();
else
widget.controller!.play();
});
},
child: Icon(
widget.controller!.isPlaying()! ? Icons.pause : Icons.play_arrow,
color: Colors.white,
),
),
InkWell(
onTap: () async {
Duration? videoDuration =
await widget.controller!.videoPlayerController!.position;
setState(() {
if (widget.controller!.isPlaying()!) {
Duration forwardDuration =
Duration(seconds: (videoDuration!.inSeconds + 2));
if (forwardDuration >
widget
.controller!.videoPlayerController!.value.duration!) {
widget.controller!.seekTo(Duration(seconds: 0));
widget.controller!.pause();
} else {
widget.controller!.seekTo(forwardDuration);
}
}
});
},
child: Icon(
Icons.fast_forward,
color: Colors.white,
),
),
],
),
);
}
}


is I mentioned the controls are working fine but they're always visible, I googled but never find implementation of onControlsVisibilityChanged

Continue reading...