jb3rndt / PersistentBottomNavBarV2

A highly customizable persistent bottom navigation bar for Flutter
https://pub.dev/packages/persistent_bottom_nav_bar_v2
BSD 3-Clause "New" or "Revised" License
47 stars 48 forks source link

While using persistent_bottom_nav_bar_v2 5.2.3, snackbar is displaying on the top(above appbar) of the screen #174

Open akhilbiju3 opened 2 weeks ago

akhilbiju3 commented 2 weeks ago

Version

5.2.3

Flutter Doctor Output

Flutter (Channel stable, 3.22.2, on Microsoft Windows [Version 10.0.19045.4529], locale en-IN)
    • Flutter version 3.22.2 on channel stable at C:\Users\Akhil\Documents\flutter_windows_3.10.5-stable\flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 761747bfc5 (3 weeks ago), 2024-06-05 22:15:13 +0200
    • Engine revision edd8546116
    • Dart version 3.4.3
    • DevTools version 2.34.3

[√] Windows Version (Installed version of Windows is version 10 or higher)

[√] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at C:\Users\Akhil\AppData\Local\Android\sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java
    • Java version OpenJDK Runtime Environment (build 17.0.10+0--11572160)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.8.6)
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community
    • Visual Studio Community 2022 version 17.8.34525.116
    • Windows 10 SDK version 10.0.22621.0

[√] Android Studio (version 2023.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • 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.10+0--11572160)

[√] VS Code (version 1.90.2)
    • VS Code at C:\Users\Akhil\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.90.0

[√] Connected device (5 available)
    • M2101K6P (mobile)            • abda523b      • android-arm64  • Android 13 (API 33)
    • sdk gphone64 x86 64 (mobile) • emulator-5554 • android-x64    • Android 13 (API 33) (emulator)
    • Windows (desktop)            • windows       • windows-x64    • Microsoft Windows [Version 10.0.19045.4529]
    • Chrome (web)                 • chrome        • web-javascript • Google Chrome 126.0.6478.115
    • Edge (web)                   • edge          • web-javascript • Microsoft Edge 126.0.2592.68

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

• No issues found!

What platforms are you seeing the problem on?

Android, iOS

What happened?

When using persistent_bottom_nav_bar_v2 5.2.3, snackbar is displaying on the top of the screen. This issue occurs where ever we use persistent bottom nav bar

Steps to reproduce

  1. Go to '...'
  2. Click on '....'
  3. Scroll down to '....'
  4. See error

Code to reproduce the problem

class BottomNavigation extends StatefulWidget {
  const BottomNavigation({Key? key}) : super(key: key);

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
  // @override
  // void initState() {
  //   if (API.isLoggenIn == null || API.isLoggenIn == false) {
  //     Navigator.pushReplacement(
  //         context, MaterialPageRoute(builder: (context) => GymLoginPage()));
  //   }
  //   super.initState();
  // }

  PersistentTabController _controller = PersistentTabController(
    initialIndex: 0,
  );
  @override
  Widget build(BuildContext context) {
    final screens = [GymHome(), MembershipScreen(), CategoryScreen(), AnnouncementScreen(), ProfileScreen()];
    List<PersistentTabConfig> tabs() => [
          PersistentTabConfig(
            screen: const GymHome(),
            item: ItemConfig(
              activeForegroundColor: bottomNavigationActiveIconColor,
              inactiveForegroundColor: bottomNavigationInActiveIconColor,
              icon: Icon(CupertinoIcons.home),
              //title: "Home",
            ),
          ),
          PersistentTabConfig(
            screen: const MembershipScreen(),
            item: ItemConfig(
              activeForegroundColor: bottomNavigationActiveIconColor,
              inactiveForegroundColor: bottomNavigationInActiveIconColor,
              icon: Icon(CupertinoIcons.creditcard),
              //title: "Wishlist",
            ),
          ),
          PersistentTabConfig(
            screen: CategoryScreen(),
            item: ItemConfig(
              icon: Icon(CupertinoIcons.bag),
              activeForegroundColor: bottomNavigationActiveIconColor,
              inactiveForegroundColor: bottomNavigationInActiveIconColor,
              //title: "Categories",
            ),
          ),
          PersistentTabConfig(
            screen: const AnnouncementScreen(),
            item: ItemConfig(
              icon: Icon(CupertinoIcons.bell),
              activeForegroundColor: bottomNavigationActiveIconColor,
              inactiveForegroundColor: bottomNavigationInActiveIconColor,
              //title: "Cart",
            ),
          ),
          PersistentTabConfig(
            screen: const ProfileScreen(),
            item: ItemConfig(
              icon: const Icon(Icons.person),
              activeForegroundColor: bottomNavigationActiveIconColor,
              inactiveForegroundColor: bottomNavigationInActiveIconColor,
              //title: "Account",
            ),
          ),
        ];
    return Scaffold(
        bottomNavigationBar: PersistentTabView(
      navBarOverlap: NavBarOverlap.full(),
      controller: _controller,
      tabs: tabs(),
      navBarBuilder: (navBarConfig) => Style4BottomNavBar(
        navBarConfig: navBarConfig,
        navBarDecoration: NavBarDecoration(
          //boxShadow: const [BoxShadow(color: Colors.grey, blurRadius: 5)],
          color: bottombackgroundColor,
        ),
      ),
      backgroundColor: bottombackgroundColor,
      stateManagement: true,
      popAllScreensOnTapAnyTabs: true,
      popActionScreens: PopActionScreensType.all,
      screenTransitionAnimation: const ScreenTransitionAnimation(
        curve: Curves.ease,
        duration: Duration(milliseconds: 200),
      ),
    ));
  }
in the above code there is a profile page and there i tried to call ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                                              content: Text("Referral Code Copied"),
                                            )); 
at that time issue occured

Relevant log output

No response

Screenshots

image

jb3rndt commented 1 week ago

The problem is that the PersistentTabView is set as the child of the Scaffold.bottomNavigationBar. Instead, just remove the scaffold. The PersistentTabView serves as a container for all the full size screens and the bottom navigation bar.