Notched icons

[Damanotra]

trafficstars

How to add notched icons for middle icons in style15?

I try to mix it with bottomappbar but fail

here is the code :

return Scaffold( key: _scaffoldKey, body: BottomAppBar( shape: CircularNotchedRectangle(), clipBehavior: Clip.antiAliasWithSaveLayer, child: PersistentTabView( context, controller: _controller, screens: _buildScreens(), items: [ PersistentBottomNavBarItem( icon: Icon(CupertinoIcons.home), title: ("Beranda"), activeColorPrimary: CupertinoColors.destructiveRed, inactiveColorPrimary: CupertinoColors.systemGrey, ), PersistentBottomNavBarItem( icon: Icon(CupertinoIcons.archivebox), title: ("Perangkat"), activeColorPrimary: CupertinoColors.destructiveRed, inactiveColorPrimary: CupertinoColors.systemGrey, ), PersistentBottomNavBarItem( icon: Icon(Icons.add), title: ("Add"), contentPadding: 12, activeColorPrimary: CupertinoColors.destructiveRed, activeColorSecondary: Colors.white, inactiveColorPrimary: Colors.white, onPressed: (context) { showModalBottomSheet( context: _scaffoldKey.currentContext, useRootNavigator: true, builder: (context){ return Container( height: 300, color: Colors.white, ); } ); }), PersistentBottomNavBarItem( icon: Icon(CupertinoIcons.captions_bubble), title: ("Kemampuan"), activeColorPrimary: CupertinoColors.destructiveRed, inactiveColorPrimary: CupertinoColors.systemGrey, ), PersistentBottomNavBarItem( icon: Icon(CupertinoIcons.person), title: ("Akun"), activeColorPrimary: CupertinoColors.destructiveRed, inactiveColorPrimary: CupertinoColors.systemGrey, ),

      ],
      confineInSafeArea: true,
      backgroundColor: Colors.blue, // Default is Colors.white.
      handleAndroidBackButtonPress: true, // Default is true.
      resizeToAvoidBottomInset: true, // This needs to be true if you want to move up the screen when keyboard appears. Default is true.
      stateManagement: true, // Default is true.
      hideNavigationBarWhenKeyboardShows: true, // Recommended to set 'resizeToAvoidBottomInset' as true while using this argument. Default is true.
      decoration: NavBarDecoration(
        borderRadius: BorderRadius.circular(0.0),
        colorBehindNavBar: Colors.white,
        adjustScreenBottomPaddingOnCurve: true,


      ),
      popAllScreensOnTapOfSelectedTab: true,
      popActionScreens: PopActionScreensType.all,
      itemAnimationProperties: ItemAnimationProperties( // Navigation Bar's items animation properties.
        duration: Duration(milliseconds: 200),
        curve: Curves.ease,
      ),
      screenTransitionAnimation: ScreenTransitionAnimation( // Screen transition animation on change of selected tab.
        animateTabTransition: true,
        curve: Curves.ease,
        duration: Duration(milliseconds: 200),
      ),
      navBarStyle: NavBarStyle.style15, // Choose the nav bar style with this property.
    ),
  ),
);

}

[oguzhan2142]

You should wrap PersistentTabView.custom with Scaffold and use floatingActionButton property of scaffold. customWidget is required. Just type SizedBox in there and ignore it.

  @override
  Widget build(BuildContext context) {
    return  Scaffold(
          extendBody: true,
          resizeToAvoidBottomInset: false,
          floatingActionButtonLocation:
              FloatingActionButtonLocation.centerDocked,
          floatingActionButton: GestureDetector(
            onTap: () {
              AppNavigator.instance.jumpPage(TabItem.cart);
            },
            child: Container(
              width: 55.0,
              height: 55.0,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Theme.of(context).primaryColor,
              ),
              child: Padding(
                padding: const EdgeInsets.all(12.0),
                child: Image.asset(
                  'assets/icons/sepet.png',
                ),
              ),
            ),
          ),
          bottomNavigationBar: Container(
            height: 64,
            decoration: const BoxDecoration(
              color: Colors.white,
            ),
            width: MediaQuery.of(context).size.width,
            child: BottomAppBar(
                color: Colors.white,
                shape: const CircularNotchedRectangle(),
                notchMargin: 6.0,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _buildItem(TabItem.homepage),
                    _buildItem(TabItem.categories),
                    Column(
                      mainAxisSize: MainAxisSize.min,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        SizedBox(
                          height: 24,
                        ),
                        Text(
                          cartTitle,
                          maxLines: 1,
                          style: GoogleFonts.poppins(
                            fontSize: 13.5,
                            color: AppNavigator.instance
                                    .isTabSelected(TabItem.cart)
                                ? selectedColor
                                : unSelectedColor,
                          ),
                        ),
                      ],
                    ),
                    _buildItem(TabItem.system),
                    _buildItem(TabItem.account),
                  ],
                )),
          ),
          body: PersistentTabView.custom(
            context,
            controller: AppNavigator.instance.controller,
            screens: [
              HomePage(),
              CategoriesPage(),
              CartPage(),
              SystemPage(),
              ProfilePage(),
            ],
            confineInSafeArea: false,
            customWidget: SizedBox(),
            itemCount: 5,
          ),
        ),
     
     
      
    );
  }```