[BUG] Custom controls are always visible

[darter0]

i'm implementing custom controls 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.

this is my player:
`
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(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,
);

}

`

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 createState() => _CustomControlsWidgetState();
}

class _CustomControlsWidgetState extends State {

@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,
        ),
      ),
    ],
  ),
);

}
}
`
this is player screen: