flutter buttomNavigationBar not displaying or working correctly - flutter

Question

I have the following code:
#override
Widget build(BuildContext context) {
// This method is rerun every time setState is called, for instance as done
// by the _incrementCounter method above.
//
// The Flutter framework has been optimized to make rerunning build methods
// fast, so that you can just rebuild anything that needs updating rather
// than having to individually change instances of widgets.
this.setTable();
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Row(children: <Widget>[
Image.asset(
'images/logobig.png',
width: 40.0,
height: 40.0,
),
Text(widget.title),
]),
backgroundColor: Colors.blue,
),
body: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: Column(children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Currency Exchange Rates",
textScaleFactor: 1,
style: TextStyle(fontWeight: FontWeight.bold),
),
),
DataTable(
// textDirection: TextDirection.rtl,
// defaultVerticalAlignment: TableCellVerticalAlignment.bottom,
// border:TableBorder.all(width: 2.0,color: Colors.red),
showCheckboxColumn: false,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Symbol',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Buy',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Sell',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
],
rows: rows,
),
]),
),
),
bottomNavigationBar: Material(
color: Colors.white,
child: Row(children: <Widget>[
FlatButton(
onPressed: () => {},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/dollar_world_grid_selected.png'),
size: 40.0,
),
Text(
"Currency",
style:
TextStyle(color: Color.fromRGBO(43, 73, 193, 0.4)),
)
],
)),
FlatButton(
onPressed: () => {
Navigator.pushReplacement(
context,
new MaterialPageRoute(
builder: (context) => goldRate()))
},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/gold-bars.png'),
size: 40.0,
),
Text(
"Gold",
style: TextStyle(
color: Color.fromRGBO(127, 127, 127, 0.4)),
)
],
)),
])));
}
The buttomNavigationBar should navigate between different screents when the user clicks on one of the buttons.
Unfortunately I get the following output:
As you can see it is displayed up. other components not displayed and the icon images are not appearing. Any Idea on how to fix or otherway to do it? Thanks

Answer 1

Replace the bottomNavigationBar with persistentFooterButtons:
persistentFooterButtons: <Widget>[
new Container(
height: 100,
child: Row(
children: <Widget>[
FlatButton(
onPressed: () => {},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/dollar_world_grid_selected.png'),
size: 40.0,
),
Text(
"Currency",
style:
TextStyle(color: Color.fromRGBO(43, 73, 193, 0.4)),
)
],
)),
FlatButton(
onPressed: () => {},
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Column(
// Replace with a Row for horizontal icon + text
children: <Widget>[
ImageIcon(
AssetImage('images/gold-bars.png'),
size: 40.0,
),
Text(
"Gold",
style:
TextStyle(color: Color.fromRGBO(127, 127, 127, 0.4)),
)
],
),
),
],
),
),
],
In case you want to use BottomNavigationBar, take a look at the example in the documentation.