Flutter ButtomNavigationBarItem add round circle and make it clickable

Question

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

Its working, https://dartpad.dev/?id=c42f306078c7ece655816482c5c0d413 — Ali Punjabi, Feb 09 '22 at 17:00
Its not working! Its only working when you press the outside of the yellow circle shape. Try clicking on the yellow shape itself (or the icon).. that sadly does not work! — Jan, Feb 09 '22 at 17:17
okay now go to this link and check its working when tapped, open console of dartpad and see printed "tapped" when you clicked on + icon, there is one more problem with index we will resolve it late but first go to below link: https://dartpad.dev/?id=c42f306078c7ece655816482c5c0d413 — Ali Punjabi, Feb 09 '22 at 17:29

score 1 · Accepted Answer · answered Feb 09 '22 at 18:47

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.

Flutter ButtomNavigationBarItem add round circle and make it clickable

1 Answers1