Is there a built in alternative to BottomNavigationBar but for a bottom menu? - flutter

Question

I'm new to flutter and am building my first app. I have a small app with maybe 4 pages, there is a bottom bar which has icons on it. Some icons call functions such as copy text (which does not need its own page but is a function to be called) while others are complex and call a new page using Navigator.push().
I tried to achieve this using a custom Row() widget on each page, but it became very odd and I was rewriting a lot of functions. I felt there had to be a bottom menu bar, but couldn't find one.
I found BottomNavigationBar and was excited that it would achieve what I wanted. But I don't think its meant to be used as a menu, but rather as the name implies, a navigation bar.
I also want the navigation bar to change menu icons as it moves to a new page. The tutorial I am following uses it as follows:
class _HomeState extends State<Home> {
int _currentIndex = 0;
final List<Widget> _children = [
PlaceholderWidget(Colors.white),
PlaceholderWidget(Colors.deepOrange),
PlaceholderWidget(Colors.green)
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter Bottem Navi '),
),
body: _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
onTap: onTabTapped,
currentIndex: _currentIndex,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
title: Text('Home'),
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
title: Text('Search'),
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
title: Text('Profile')
)
],
),
);
}
The body: is changed based on the index selected. Can this be repurposed to act as a menu? to make use of Navigator.push or is my previous method of having a Row() widget on each page the best option?

Answer 1

You can copy paste run full code below
You can use BottomAppBar
code snippet
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
),
Builder(
builder: (context) => IconButton(
icon: Icon(Icons.title),
onPressed: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('Show Snackbar'),
duration: Duration(seconds: 3),
));
},
)),
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Tasks - Bottom App Bar')),
body: ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
Container(
height: 50,
color: Colors.amber[600],
child: const Center(child: Text('Entry A')),
),
Container(
height: 50,
color: Colors.amber[500],
child: const Center(child: Text('Entry B')),
),
Container(
height: 50,
color: Colors.amber[100],
child: const Center(child: Text('Entry C')),
),
],
),
bottomNavigationBar: BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => SecondRoute()));
},
),
Builder(
builder: (context) => IconButton(
icon: Icon(Icons.title),
onPressed: () {
Scaffold.of(context).showSnackBar(SnackBar(
content: Text('Show Snackbar'),
duration: Duration(seconds: 3),
));
},
)),
IconButton(
icon: Icon(Icons.settings),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.sync),
onPressed: () {},
),
],
),
),
);
}
}
class SecondRoute extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Second Route"),
),
body: Center(
child: RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Go back!'),
),
),
);
}
}