When using the BottomNavigationBar: BottomAppBar, the body doesn't show up on screen. But when I move it, the body shows on screen. Since I have the bottom navigation bar outside of the main body as it should be, it's very puzzling as to why the body content just goes invisible while the bottom navigation bar is in the code.
Edit: wondering if maybe the body needs to be changed from being a 'new Container' to something else, hence why I've included so much code.
Here's the code:
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(
title: const Text('Refine'),
backgroundColor: Color(0xFFffffff),
),
body: new Container(
width: MediaQuery.of(context).copyWith().size.width,
child: ListView(
shrinkWrap: true,
children: <Widget>[
new Column(
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text(
'Sort By',
style:
TextStyle(color: Colors.black, fontSize: 15.0, fontWeight: FontWeight.bold),
),
),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Color(0xFFffffff),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
new Text(
'Relevance',
style:
TextStyle(color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.normal),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
new Text(
'Top Rated',
style:
TextStyle(color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.normal),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
new Text(
'New',
style:
TextStyle(color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.normal),
),
],
),
),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text(
'Category',
style:
TextStyle(color: Colors.black, fontSize: 15.0, fontWeight: FontWeight.bold),
),
),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Color(0xFFffffff),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text('All Categories'),
),
),
],
),
),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text(
'Location',
style:
TextStyle(color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold),
),
),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Color(0xFFffffff),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget> [
new DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text('Illinois'),
),
),
new DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: Text('Chicago'),
),
),
],
),
),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
child: Text(
'Price',
style:
TextStyle(color: Colors.black,
fontSize: 15.0,
fontWeight: FontWeight.bold),
),
),
),
new Padding(
padding: const EdgeInsets.only(top: 15.0,),
),
Align(
alignment: Alignment.centerLeft,
child: Container(
color: Color(0xFFffffff),
child: Row(
children: <Widget>[
new Text(
'\$',
),
new Text(
'To',
),
],
),
),
),
],
),
],
),
),
bottomNavigationBar: BottomAppBar(
child: new Container(
padding: EdgeInsets.only(
top: 20.0,
bottom: 20.0,
left: 25.0,
right: 25.0,
),
decoration: BoxDecoration(
color: Color(0xFFffffff),
),
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new SizedBox(
width: double.infinity, child: RaisedButton(
color: Color(0xFF2e616f),
textColor: Colors.white,
onPressed: () {},
child: Text('Apply',
style: new TextStyle(fontSize: 14.0)),
),
),
],
),
),
),
);
}
The problem is specifically this line within your bottom navigation bar SizedBox:
width: double.infinity
Instead of using the above, consider using the following:
width: MediaQuery.of(context).size.width - 50
The "- 50" is to account for the padding on the left and right, which is 25 each.
Rémi Rousselet posted up a good explanation here explaining the difference between double.infinity and MediaQuery: Whats the difference between double.infinity and MediaQuery?.