PageView.builder controls do not hide

[Zelfapp]

I have multiple videos I want to play as the user swipes vertically. The following code does display the video, however, the controls never disappear as you can see in the screenshot. Is this an issue with betterplayer or my approach using PageView.builder? The videos do display and auto play on each swipe, but the controls are not working as expected.

E.g. showControlsOnInitialize: false, is set to false, but the controls display no matter what and then they never remove and the video is overlayed with the semi-opaque background behind the betterplayer controls.

PageView.builder(
    scrollDirection: Axis.vertical,
     itemCount: data.length,
     itemBuilder: (context, index) {
     final Info meta = data[index].meta;
     final String longLivedUrl = data[index].longLivedUrl;

     return Stack(
         children: [
             BetterPlayer.network(
                 longLivedUrl,
                 betterPlayerConfiguration: BetterPlayerConfiguration(
                     fit: BoxFit.cover,
                     autoDetectFullscreenDeviceOrientation: true,
                     deviceOrientationsAfterFullScreen: [
                         DeviceOrientation.portraitUp
                     ],
                     deviceOrientationsOnFullScreen: [
                         DeviceOrientation.portraitUp
                     ],
                     autoPlay: true,
                     aspectRatio: _aspectRatio,
                     eventListener: (BetterPlayerEvent event) {},
                     controlsConfiguration:
                     const BetterPlayerControlsConfiguration(
                         backgroundColor: Colors.transparent,
                         enableFullscreen: false,
                         showControlsOnInitialize: false,
                         enableProgressBar: false,
                         enableProgressText: false,
                     ),
                 ),
             ),

             SafeArea(
                 child: Align(
                     alignment: Alignment.topLeft,
                     child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          IconButton(
                            icon: const Icon(Icons.arrow_back),
                            onPressed: () {
                              Navigator.pushNamedAndRemoveUntil(
                                context,
                                AppRoutes.corral,
                                (Route<dynamic> route) => false,
                              );
                            },
                            color: Colors.white,
                          ),
                          Text(
                            'From ${info.displayName!}',
                            style: kFontWhiteBoldTextStyle,
                          ),
                          const SizedBox(
                            width: 24.0,
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              );
            },
          )

flutter doctor -v

```dart [✓] Flutter (Channel stable, 2.8.0, on Manjaro Linux 5.4.159-1-MANJARO, locale en_US.UTF-8) • Flutter version 2.8.0 at /opt/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision cf44000065 (2 days ago), 2021-12-08 14:06:50 -0800 • Engine revision 40a99c5951 • Dart version 2.15.0 [✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0-rc2) • Android SDK at /home/nate/Android/Sdk • Platform android-31, build-tools 31.0.0-rc2 • ANDROID_HOME = /opt/android-sdk • ANDROID_SDK_ROOT = /home/nate/Android/Sdk • Java binary at: /opt/android-studio/jre/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) • All Android licenses accepted. [✓] Chrome - develop for the web • CHROME_EXECUTABLE = /usr/bin/google-chrome-stable [✓] Android Studio (version 2020.3) • Android Studio at /opt/android-studio • Flutter plugin version 63.0.1 • Dart plugin version 203.8452 • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189) [✓] Connected device (2 available) • sdk gphone x86 64 arm64 (mobile) • emulator-5554 • android-x64 • Android 11 (API 30) (emulator) • Chrome (web) • chrome • web-javascript • Google Chrome 96.0.4664.93 • No issues found! ```

Better Player version

• Version: better_player: ^0.0.79

Testing on Android SDK 30 Pixel 4xl emulator in Android Studio

[sdegenaar]

Yep see this too and would like to hide them firstly and only show on tap

[jhomlala]

@Zelfapp Can you provide minimal reproducible example which can be run without any fixes?

[Zelfapp]

@jhomlala I ended up using the Stacked package with BetterPlayer to create MVVM with a feed view model to create an instance for each video when PageView.builder pages changed. Functions like TikTok. So I don't have a reproducible example and think Stacked is the correct way to go to build the view on each page change.