[Bug]: Drawer drag is still available for navigated screen with navigation bar included

[mihai-gabriel8]

Version

5.2.3

Flutter Doctor Output

mihai@Mihais-MacBook-Air ios % flutter doctor -v
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-RO)
    • Flutter version 3.22.2 on channel stable at /Users/mihai/Programming/sdks/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (6 days ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 33.0.0)
    • Android SDK at /Library/Android/sdk
    • Platform android-34, build-tools 33.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.14.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b802.4-9586694)

[✓] VS Code (version 1.89.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.90.0

[✓] Connected device (5 available)
    • sdk gphone arm64 (mobile)       • emulator-5554             • android-arm64  •
      Android 11 (API 30) (emulator)
    • macOS (desktop)                 • macos                     • darwin-arm64   • macOS
      14.5 23F79 darwin-arm64
    • Mac Designed for iPad (desktop) • mac-designed-for-ipad     • darwin         • macOS
      14.5 23F79 darwin-arm64
    • Chrome (web)                    • chrome                    • web-javascript •
      Google Chrome 125.0.6422.142

[✓] Network resources
    • All expected network resources are available.

• No issues found!

What platforms are you seeing the problem on?

Android, iOS

What happened?

Hello there!

In my project, I used an older version of this package for the persistent navigation with bottom bar feature. However on my Base Page (where there are all the tabs included) I have a drawer in all tabs that should be disabled for the specific screen that is navigated.

When I navigate to the screen (I am now on second screen flow for that specific tab), if I try to swipe back (on iOS), the drawer opening animation starts. This behaviour shouldn't happen, and on a late version I used to have a Scaffold because it has the property drawerEnableOpenDragGesture, and I would handle the case where a specific page was navigated, and set it to false if the user is currently on the persistent navigation flow.

I don't know if this should be a feature request, but perhaps the Widget PersistentTabView should also have a drawerEnableOpenDragGesture property?

Steps to reproduce

1. Configure Persistent Tab View
2. Add a drawer to the PersistentTabView widget
3. Navigate to another screen through a selected tab, with function pushWithNavBar( ... )
4. Swipe back Gesture -> opens drawer on the navigated screen

Code to reproduce the problem

class BasePage extends StatefulWidget {
  const BasePage({super.key});

  @override
  State<BasePage> createState() => _BasePageState();
}

class _BasePageState extends State<BasePage> {
  late PersistentTabController _controller;

  /// Current Page Index of the nested navigation UI.
  int currentIndex = 0;

  void updateLastScreenIndex({required int lastIndex}) {
    context.read<NavigationHelper>().toggleCurrentIndex(lastIndex);
    setState(() {
      currentIndex = lastIndex;
    });
  }

  /// Displays Paywall to user if ``hasMembership`` is false when navigating to
  /// [DigitalCardPage] through the bottom navigation bar.
  void digitalCardPayWallHandler(value, bool hasMembership) {
    if (value != 3) updateLastScreenIndex(lastIndex: value);
    if (value == 3 && !hasMembership) {
      context.read<NavigationHelper>().toggleCurrentIndex(currentIndex);

      setState(() {
        _controller.jumpToTab(currentIndex);
      });

      pushScreenWithoutNavBar(
        context,
        const SubscribePage(handleBackButton: true),
      ).then((value) => context.read<NavigationHelper>().setDarkNavBar());
    }
    if (value == 3 && hasMembership) {
      updateLastScreenIndex(lastIndex: value);
    }
  }

  @override
  void initState() {
    super.initState();
    _controller = PersistentTabController(initialIndex: 0);
    context.read<NavigationHelper>().setDarkNavBar();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<NavigationHelper, NavigationHelperState>(
      builder: (context, state) {
        return BlocBuilder<UserCubit, UserState>(
          builder: (context, state) {
            bool hasMembership = state.user.hasMembership ?? false;

            return PersistentTabView(
              controller: _controller,
              drawer: const CustomDrawer(),

              gestureNavigationEnabled: false,
              // context.read<NavigationHelper>().canOpenDrawer,
              onTabChanged: (value) {
                digitalCardPayWallHandler(value, hasMembership);
              },
              navBarBuilder: (navBarConfig) => Style6BottomNavBar(
                navBarConfig: navBarConfig,
                navBarDecoration: Config.navBarDecoration,
              ),
              avoidBottomPadding: true,
              tabs: Config.navigationBarItems(hasMembership),
            );
          },
        );
      },
    );
  }
}

Relevant log output

No response

Screenshots

No response

[jb3rndt]

Hi, thank you for reporting this.

Yes I guess you are right, the drawerEnableOpenDragGesture parameter is missing. So you would change drawerEnableOpenDragGesture depending on the platform, right?

[mihai-gabriel8]

Hi, thank you for reporting this.

Yes I guess you are right, the drawerEnableOpenDragGesture parameter is missing. So you would change drawerEnableOpenDragGesture depending on the platform, right?

No, it has nothing to do with the platform

In my code I created a Navigation Helper Cubit that keeps the state of the tabs, and if a Base Tab is navigated, I would disable the swipe Gesture for opening the drawer with adding the condition canOpenDrawer from the helper cubit to the drawerEnableOpenDragGesture parameter of the Scaffold

The application that I am working on has a navigation flow similar to instagram/facebook, where the bottom navigation persists in all screens, but with this package I encountered a problem where the Drawer animation would start if a specific tab is navigated with the navigation bar included.

I fixed this with the help of the Navigation Helper Cubit by doing some mapping and adding some conditions, running a function when a page is navigated/popped, but in an older version of this package I would nest the PersistentTabView widget inside a Scaffold (although it was not recommended) to also have a drawer.

Currently I am hacking this by adding the condition

drawer: context.read<NavigationHelper>().canOpenDrawer ? CustomDrawer() : null
But the user can see the drawer disappearing/appearing and it's not great

Aside from this, this package is awesome, thank you!

[jb3rndt]

So that means that adding the drawerEnableOpenDragGesture parameter solves the issues you currently encounter, right?

[jb3rndt]

Can you check if setting drawerEdgeDragWidth: 0.0 works as well?