How to show alert dialog box if page is switched in bottom navigation bar in flutter

Question

Currently I am working on flutter project in which I have used bottom navigation bar and in one of the pages I have a form in which information needs to fill. In this case if the user switches to another page after filling information and does not submit it, I want to show dialog box to user that "You have information filled leaving this page will discard the info". Please help.

I have tried WillPopScope widget but it only works when you press back button I want to show dialog box when the text fields are filled but not submitted and without submitting user tries to switch to another page.

Can you attach some code and images for better understanding? — Jungwon, Nov 23 '22 at 08:50

Taimoor Ghafar · Answer 1 · 2022-11-23T11:57:20.067

0

In the onTap callback, check if the Navbar Item index is not equal to the Item which contains the form. If it is different, show the dialog and await its response.

  void _onItemTapped(int index) async {
   if(_selectedIndex == formItemIndex && index != formItemIndex)
    {
       // await showDialog();
    }
    setState(() {
      _selectedIndex = index;
    });
  }

BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      )

edited Nov 23 '22 at 11:57

answered Nov 23 '22 at 09:21

Taimoor Ghafar

131
5

I tried this but dialog box can be seen on every page change. – Mohsin Patel Nov 23 '22 at 10:07
I have updated the code. Just another simple check – Taimoor Ghafar Nov 23 '22 at 11:57
Can you help me with how can I call the controllers from different class. As I want to show this dialog only when user has filled the info and not submitted. Thanks. – Mohsin Patel Nov 25 '22 at 05:35
You can access controllers either by making the public which is not a good approach. Or you can use any state management technique to place your controllers inside of it. – Taimoor Ghafar Nov 25 '22 at 06:16
Can I use GetX for this ?? – Mohsin Patel Nov 26 '22 at 06:35
You can use any approach. The idea behind this is to access controllers. – Taimoor Ghafar Nov 28 '22 at 05:10

How to show alert dialog box if page is switched in bottom navigation bar in flutter

1 Answers1