Flutter ButtomNavigationBarItem add round circle and make it clickable-CodePudding

so, I am working on my ButtomNavigationBar which should include a rectangle for the icon in the center. I have already archived that. However, now I am facing one problems:

Sadly the shape and icon itself is not clickable. Nothing happens when I click on it (even when I try printing something to the console). It only switches the screen when clicking slightly outside of the shape. For me this seems like a "z-index" problem. Any idea on how I can solve this?

I also have tried to wrap my Container into a GestureDetector but that also does not work..

BottomNavigationBarItem(
    icon: GestureDetector(
    onTap: () =>  { onClicked },
    child: 
        Container(
            // same code as below
        ),
    ),
    label: 'Add',
),

This is my complete code:

BottomNavigation

class BottomNavigation extends StatelessWidget {
  int selectedIndex;
  ValueChanged<int> onClicked;
  BottomNavigation({Key? key, required this.selectedIndex, required this.onClicked}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BottomNavigationBar(
      currentIndex: selectedIndex,
      selectedItemColor: AppColors.orange,
      onTap: onClicked,
      type: BottomNavigationBarType.fixed,
      showSelectedLabels: false,
      showUnselectedLabels: false,
      backgroundColor: AppColors.white,
      items: <BottomNavigationBarItem>[
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.home),
          label: 'Home',
        ),
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.search),
          label: 'Search',
        ),
        BottomNavigationBarItem(
          icon: Container(
            decoration: BoxDecoration(
              color: AppColors.orange,
              shape: BoxShape.circle,
            ),
            child: Padding(
                padding: const EdgeInsets.all(0.0),
                child: IconButton(
                  onPressed: () =>  { onClicked },
                    icon: Icon(CupertinoIcons.plus, color: AppColors.white)
                )
            ),
          ),
          label: 'Add',
        ),
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.bell),
          label: 'Notifications',
        ),
        const BottomNavigationBarItem(
          icon: Icon(CupertinoIcons.news),
          label: 'Blog',
        ),
      ],
    );
  }
}

Home (where the BottomNavigation gets integrated):

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  int _selectedIndex = 0;

  final screens = [
    HomePage(),
    SearchPage(),
    ProductSubmitPage(),
    NotificationPage(),
    BlogPage()
  ];

  void onClicked(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: screens[_selectedIndex],
        bottomNavigationBar: BottomNavigation(
          selectedIndex: _selectedIndex,
          onClicked: onClicked,
        )
    );
  }
}

This stack inspired my on how to add a shape to the icon: https://stackoverflow.com/a/67577496/9445999

UPDATE: Here is my dartpad: https://dartpad.dev/?id=c42f306078c7ece655816482c5c0d413

Kind regards

CodePudding user response：

Your error is on the calling of your function. You should be doing this like either one of this lines:

//Being 2 the index of this in the list
onPressed: () =>  onClicked(2),
onPressed: () {onClicked(2);},

I have no experience with this BottomNavigationBarItem so I don't know why it's behaving this way, but that would solve your problem.