How do I set the bottom navigation bar for a Flutter app page by page?

Question

I would like to set whether to show the bottom navigation bar in a Flutter app page/screen/route by route. For example, when the user navigates through their files and clicks on folders, I want to show the bottom navigation bar. But when the user clicks on a "Create" button, I would not like the bottom navigation for the rest of this flow, and the user navigates backward through the back button in the app bar.

If this is not possible without a very customized, hacky, inflexible, complication solution, I would also be fine with choosing at the beginning of the flow whether to remove the bottom navigation bar.

I have tried the "normal" method, in which the bottom navigation bar only stays for the buttons that are in the bar itself, and it does not persist for anything else (using an IndexedStack and a _currentIndex variable). I have also tried the opposite, in which the bottom navigation shows for everything, which is also not desirable.

Here's what I have currently: MyApp top-level widget:

  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flytrap Audio',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const CurrentPage(),
    );
  }

CurrentPageState (stateful) Widget

  Widget build(BuildContext context) {
    return Scaffold(
      body: IndexedStack(
        index: _currentIndex,
        children: screens,
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        showUnselectedLabels: false,
        currentIndex: _currentIndex,
        onTap: (index) {
          // debugPrint("index: $index");
          setState(() => _currentIndex = index);
          // _navigatorKey.currentState!
          //     .pushNamedAndRemoveUntil(screens[index], (route) => false);
          // debugPrint("Navigated to ${screens[index]}");
        },
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.folder),
            label: 'Files',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.live_tv),
            label: 'Live Broadcasts',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }

And each page, like FolderPage is a Scaffold

score 0 · Answer 1 · answered Jul 22 '22 at 02:21

I think you can check my code, I do the little same as you said.But I use the PageView instead:

final _listPage = [
const Page1(),
const Page2(),
const Page3(),
const Page4()
];
final _controller = PageController();
int _indexSelected = 0;
void _onSelected(int index) {
setState(() {
  _indexSelected = index;
});
}

Widget build(BuildContext context) {
return Scaffold(
  body: PageView(
    controller: _controller,
    onPageChanged: _onSelected,
    children: _listPage,
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const [
      BottomNavigationBarItem(
          icon: ImageIcon(
            AssetImage('assets/images/bottom_tab/bw_u.png'),
            size: 25,
          ),
          label: 'Item 0'),
      BottomNavigationBarItem(
          icon: Icon(Icons.shopping_bag), label: 'Item 1'),
      BottomNavigationBarItem(
          icon: Icon(Icons.account_circle_outlined), label: 'Item 2'),
      BottomNavigationBarItem(icon: Icon(Icons.widgets), label: 'Item 3')
    ],
    currentIndex: _indexSelected,
    onTap: (index) => _controller.animateToPage(index,
        duration: const Duration(milliseconds: 200), curve: Curves.easeIn),
    selectedItemColor: const Color.fromARGB(255, 38, 112, 205),
    unselectedItemColor: Colors.grey,
    type: BottomNavigationBarType.fixed,
  ),
);

}

How do I set the bottom navigation bar for a Flutter app page by page?

1 Answers1