In persistent_bottom_nav_bar , I am using it's style15 And in navbardecoration i have applied borderRadius But it don't take it.I have tried Stack

Question

I want this type of borderRadius. But it doesn't apply BorderRadius.

Stack(
          alignment: Alignment.bottomCenter,
          children: [
            Container(
              height: 80,
              width: double.infinity,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(25),
                color: Colors.white,
              ),
            ),
            PersistentTabView(context,
                screens: pages,
                navBarHeight: 80,
                controller: _controller,
                backgroundColor: Colors.white30,
                navBarStyle: NavBarStyle.style15,
                items: myscreens,
                confineInSafeArea: true,
                handleAndroidBackButtonPress: true,
                resizeToAvoidBottomInset: true,
                stateManagement: true,
                hideNavigationBarWhenKeyboardShows: true,
                decoration: NavBarDecoration(
                    adjustScreenBottomPaddingOnCurve: true,
                    borderRadius: BorderRadius.circular(20.0),
                    colorBehindNavBar: Colors.white),
                popAllScreensOnTapOfSelectedTab: true,
                popActionScreens: PopActionScreensType.all,
                itemAnimationProperties: const ItemAnimationProperties(
                    duration: Duration(milliseconds: 200), curve: Curves.ease),
                screenTransitionAnimation: const ScreenTransitionAnimation(
                    animateTabTransition: true,
                    curve: Curves.ease,
                    duration: Duration(milliseconds: 200))),
          ],
        ),

I have applied this type of code but still it doesn't work It can't apply borderRadius . Now i am making it customly But still i want the solution .

I have tried by stack , Wrapping it in a container but still doesn't work .

Answer 1

For border radius to bottomNavBar use flutter's package persistent_bottom_nav_bar_v2 instead of persistent_bottom_nav_bar

Container(
      height: double.infinity,
      child: Stack(
        alignment: Alignment.bottomCenter,
        children: [
          PersistentTabView(
            navBarHeight: 80,
            handleAndroidBackButtonPress: true,
            resizeToAvoidBottomInset: true,
            stateManagement: true,
            popAllScreensOnTapOfSelectedTab: true,
            popActionScreens: PopActionScreensType.all,
            screenTransitionAnimation: const ScreenTransitionAnimation(
              curve: Curves.ease,
              duration: Duration(milliseconds: 200),
            ),
            tabs: [
              PersistentTabConfig(
                screen: Container(),
                item: ItemConfig(
                  icon: Icon(Icons.home),
                  title: "Home",
                ),
              ),
              PersistentTabConfig(
                screen: Container(),
                item: ItemConfig(
                  icon: Icon(Icons.message),
                  title: "Messages",
                ),
              ),
              PersistentTabConfig(
                screen: Container(),
                item: ItemConfig(
                  icon: Icon(Icons.settings),
                  title: "Settings",
                ),
              ),
            ],
            navBarBuilder: (navBarConfig) => Style1BottomNavBar(
              navBarConfig: navBarConfig,
              navBarDecoration: NavBarDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.only(topLeft: Radius.circular(50), topRight: Radius.circular(50)),
              ),
            ),
          ),
        ],
      ),
    );