flutterflutter-cupertinocupertinonavigationbar

Flutter how to hide Cupertino bottom navigation bar at next page


I currently working on a project need to build with Cupertino widget. Everything is fine until I trying not to display bottom navigation bar at next page, but the bottom navigation bar still bring forward from previous page. Below is my example code.

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoTabScaffold(
      tabBar: CupertinoTabBar(
        items: [
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.person), label: 'Person'),
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.mail), label: 'Mail'),
          BottomNavigationBarItem(
              icon: Icon(CupertinoIcons.flag), label: 'Flag'),
        ],
      ),
      tabBuilder: (context, index) {
        return CupertinoTabView(
          routes: {
            'p2': (context) => PageTwo(),
          },
          builder: (context) {
            return CupertinoPageScaffold(
                backgroundColor: Colors.white,
                child: Center(
                  child: Column(
                    children: [
                
                      ElevatedButton(
                        onPressed: () {
                          Navigator.pushNamed(context, 'p2');
                        },
                        child: Text('Next Page'),
                      ),
                    ],
                  ),
                ));
          },
        );
      },
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color: Colors.white,
        child: Column(children: [
          Text('Page 2'),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Back'),
          ),
        ]),
      ),
    );
  }
}

Solution

  • Found the solutions.

    First solution.

    Just repace

    Navigator.pushNamed(context,'p2');
    

    to

    Navigator.of(context, rootNavigator: true).pushNamed('p2');
    
    

    Second solution

    Remove the CupertinoTabView from tabBuilder if not necessary to use it

      tabBuilder: (context, index) {
            return CupertinoPageScaffold(
              backgroundColor: Colors.white,
              child: Center(
                child: Column(
                  children: [
                    SizedBox(
                      height: 50.0,
                    ),
                    ElevatedButton(
                      onPressed: () {
                        Navigator.pushNamed(context, 'p2');
                      },
                      child: Text('Next Page'),
                    ),
                  ],
                ),
              ),
            );
          },
    

    imprtant: must set routes for class CupertinoApp