Is there anyway to move the bottom navigation bar, to the top of the screen instead of the bottom?

Question

I am currently developing in flutter and I am trying to move my navigation bar to the top of my screen rather than the bottom which is the default.

I am using a flutter plugin called salomon_bottom_bar: ^3.1.0 and here is the following code for it.

   bottomNavigationBar:
SalomonBottomBar(
    currentIndex: _currentIndex, onTap: (i) => setState(() => _currentIndex = i),
    items: [
      SalomonBottomBarItem(icon: Icon(Icons.home), title: Text("Home"), selectedColor: Colors.pink, unselectedColor: Colors.white),
      SalomonBottomBarItem(icon: Icon(Icons.add), title: Text("Alarm"), selectedColor: Colors.yellow, unselectedColor: Colors.white),
      SalomonBottomBarItem(icon: Icon(Icons.timer), title: Text("Stopwatch"), selectedColor: Colors.orange, unselectedColor: Colors.white),
      SalomonBottomBarItem(icon: Icon(Icons.watch), title: Text("Timer"), selectedColor: Colors.cyan, unselectedColor: Colors.white)
    ],
),

for top level, we have tabBar widget – Md. Yeasin Sheikh Aug 30 '21 at 17:48 — Md. Yeasin Sheikh, Aug 30 '21 at 17:48

score 1 · Accepted Answer · answered Aug 30 '21 at 18:06

You can add this to you appbar:

appbar: AppBar(
   flexibleSpace: SalomonBottomBar(
    currentIndex: _currentIndex, onTap: (i) => setState(() => _currentIndex = i),
    items: [
      SalomonBottomBarItem(icon: Icon(Icons.home), title: Text("Home"), selectedColor: Colors.pink, unselectedColor: Colors.white),
      SalomonBottomBarItem(icon: Icon(Icons.add), title: Text("Alarm"), selectedColor: Colors.yellow, unselectedColor: Colors.white),
      SalomonBottomBarItem(icon: Icon(Icons.timer), title: Text("Stopwatch"), selectedColor: Colors.orange, unselectedColor: Colors.white),
      SalomonBottomBarItem(icon: Icon(Icons.watch), title: Text("Timer"), selectedColor: Colors.cyan, unselectedColor: Colors.white)
    ],
),
)

Is there anyway to move the bottom navigation bar, to the top of the screen instead of the bottom?

1 Answers1