Home > OS >  How to show navigation bar on page which doesn't belong to this bar?
How to show navigation bar on page which doesn't belong to this bar?

Time:10-16

edit: SOLUTION i used package custom_navigator

In navigation bar I have 2 pages to redirect, but I want to navigate to third page and still want to see navigation bar (this one with 2 pages) there.

Is it possible to do? Do I have to make my own navigation bar for this page?

class Bar extends StatefulWidget {
  @override
  BarState createState() => BarState();
}

class BarState extends State<Bar> {
  int tabIndex = 0;
  List<Widget> pages = [
    FirstPage(),
    SecondPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight),
          child: SafeArea(
            child: BottomNavigationBar(
              iconSize: 25,
              elevation: 4.0,
              items: <BottomNavigationBarItem>[
                barItem(Icons.message),
                barItem(Icons.camera_enhance),
                barItem(Icons.person),
              ],
              currentIndex: tabIndex,
              onTap: (int index) {
                setState(() {
                  tabIndex = index;
                });
              },
            ),
          )),
      body: Container(
        child: pages.elementAt(tabIndex),
      ),
    );
  }
}

this is what i try:

List<Widget> pages = [
    Container( 
      color: Colors.green,
      child: Center(
        child: ElevatedButton(
          onPressed: state
        ),
      ),
    ),
    SecondPage(),
    ThirdPage()
  ];

  state() {
    tabIndex = 2;
    setState(() {
      
    });
  }

CodePudding user response:

The simplest way, if you don't mind it animating would be to init an AppBar in your navigator and pass it to the pages and they would use it in there scaffold.

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

  @override
  _MyFlowState createState() => _MyFlowState();
}

class _MyFlowState extends State<MyFlow> {
  @override
  Widget build(BuildContext context) {
    final appBar = AppBar();

    return Navigator(
      onPopPage: (route, result) => true,
      pages: [
        MaterialPage(child: PageOne(appBar: appBar)),
        MaterialPage(child: PageTwo(appBar: appBar)),
        MaterialPage(child: PageThree(appBar: appBar)),
      ],
    );
  }
}

class PageOne extends StatelessWidget {
  const PageOne({Key? key, required this.appBar}) : super(key: key);

  final AppBar appBar;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar,
    );
  }
}
  • Related