Flutter: How to use a BottomSheet in a BottomNavigationBar?

Question

I'm new to Flutter and I'm wondering if there is any way to add a BottomSheet as a BottomNavigationBarItem? I tried doing this myself, but it causes an error.

Like when you press the 'Add' button, instead of being taken to a new page, a bottom sheet should appear to add a item.

Example 1 - Before clicking the plus icon:

Example 2 - BottomSheet opens up after clicking the plus icon:

Is this possible, or do I have to make a custom NavigationBar for it? Here is my code:

    class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: pages[currentIndex],
      bottomNavigationBar: 
      
      BottomNavigationBar(
        iconSize: 24,
        selectedFontSize: 12,
        unselectedItemColor: AppPallete.hintColor,
        selectedItemColor: AppPallete.whiteColor,
        elevation: 0,
        items: [
          BottomNavigationBarItem(
            icon: Padding(
              padding: const EdgeInsets.all(4.0),
              child: SvgPicture.asset('assets/svg/folder.svg',
                colorFilter: ColorFilter.mode(
                          currentIndex== 0
                          ?AppPallete.whiteColor
                          :AppPallete.hintColor, BlendMode.srcIn),
              ),
            ),
            label: 'Lernsets'
          ),
          BottomNavigationBarItem(
            icon: SvgPicture.asset('assets/svg/add.svg',
              colorFilter: ColorFilter.mode(
                        currentIndex== 1
                        ?AppPallete.whiteColor
                        :AppPallete.hintColor, BlendMode.srcIn),
              height: 35,
              width: 35,
            ),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Padding(
              padding: const EdgeInsets.all(4.0),
              child: SvgPicture.asset('assets/svg/profil.svg',
                colorFilter: ColorFilter.mode(
                          currentIndex== 2
                          ?AppPallete.whiteColor
                          :AppPallete.hintColor, BlendMode.srcIn),
              ),
            ),
            label: 'Profil',
            
          )
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index){
          setState(() {
            currentIndex = index;
          });
        },
        backgroundColor: AppPallete.backgroundColor,
      ),

    );
  }

  final pages = [
    LernsetPage(),
    AddSetPage(),
    ProfilePage()
  ];
}

Thanks for your help.

Answer 1

Yeah you can do it very simple. Where you have a type argument so just update it like this way.

type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        onTap: (index) {
          setState(() {
            currentIndex = index;
            if (index == 1) {
              // Show the bottom sheet when the 'Add' button is pressed
              _showAddBottomSheet(context);
            }
          });
        },

And you can have a bottom sheet as:

void _showAddBottomSheet(BuildContext context) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Padding(
            padding: const EdgeInsets.all(16.0),
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                ListTile(
                  title: Text('Add Item'),
                  onTap: () {
                    print('Item added!');
                    Navigator.pop(context); // Close the bottom sheet
                  },
                ),
              ],
            ),
          ),
        );
      },
    );
  }

You can customize it according to your need.