I want to navigate to a page when I click navbar items. I tried this using a gesture detector widget. but it's not working here. and for one icon I want to add a snack bar to display coming soon. how can I do this. appreciate your help on this.

1. navigate to a page
2. display snack bar with the text "coming soon"

 class BottomNavigation extends StatefulWidget {
  const BottomNavigation({ Key? key }) : super(key: key);

  @override
  State<BottomNavigation> createState() => _BottomNavigationState();
}

class _BottomNavigationState extends State<BottomNavigation> {
int _selectedindex = 0;

  void _navigatePages(int index) {
    setState(() {
      _selectedindex = index;
    });
  }

final List<Widget> _Pages = [const Dashboard() ,const WelcomeScreen()];

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      extendBody: true,
      body: _Pages[_selectedindex],
       bottomNavigationBar: Container(
         clipBehavior: Clip.hardEdge,
         decoration: BoxDecoration(
           borderRadius: BorderRadius.only(
             topRight: Radius.circular(24),
             topLeft: Radius.circular(24),

           ),
         //  color: Colors.transparent,
         ),
         child: BottomNavigationBar(

           backgroundColor:  Colors.grey.withOpacity(0.6),
              currentIndex: _selectedindex,
              onTap: _navigatePages,
              type: BottomNavigationBarType.fixed,

              items: const [
                BottomNavigationBarItem(
                  icon: ImageIcon(
                    AssetImage("assets/images/wallet.png"),
                    color: Colors.black,
                    size: 32,
                  ),
                  label: "",
                ),


                BottomNavigationBarItem(
                  icon: ImageIcon(
                    AssetImage("assets/images/store.png"),
                    color: Colors.black,
                    size: 32,
                  ),
                  label: "",

                ),
                BottomNavigationBarItem(

                  icon: ImageIcon(
                    AssetImage("assets/images/coin.png"),
                    color: Colors.black,
                    size: 32,
                  ),
                  label: "",

                )
              ]),
       ),

    );
  }
}

CodePudding user response：

I didn't understand if you can navigate to a screen or not, but I copied your code as is and I can navigate, anyway I leave you this little change that you can do if you can't go to another page:

     BottomNavigationBar(
        backgroundColor: Colors.grey.withOpacity(0.6),
        currentIndex: _selectedindex,
        onTap: (int i) => _navigatePages(i), // here
        type: BottomNavigationBarType.fixed,
        items: const [
     [...]

Now, to show a Snackbar, in your function _navigatePages you only make a small validation that if the index is the last one (that is the 2), show the snackbar, first hide one if it exists... if not do the setState.

  void _navigatePages(int index) {
    if (index == 2) {
      ScaffoldMessenger.of(context).hideCurrentSnackBar();
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text("coming soon")));
    } else {
      setState(() {
        _selectedindex = index;
      });
    }
  }

CodePudding user response：

Your full code is ok, just you need to add a Snackbar for your needed index. Suppose, you have three Bottom Navigation Bar & you will show your snackbar for the last Bottom Navigation icon, which means the index will be 2. [this index will be changed based on your decision]

Your _navigatePages() function will be changed like as below code :

  void _navigatePages(int index) {
    if(index == 2){
      ScaffoldMessenger.of(context).hideCurrentSnackBar();
      ScaffoldMessenger.of(context)
          .showSnackBar(const SnackBar(content: Text("coming soon")));
    }else{
      ScaffoldMessenger.of(context).hideCurrentSnackBar();
      setState(() {
        _selectedindex = index;
      });
    }
  }

N.B: Please change the function only, others all code is ok.