rameez khan
Reputation: 359
Flutter my navigation bar is showing on top
I am building an app I need to use a navigation bar so I have following some tutorial to get this type of bar. All things are working fine but the use is the bar is not showing on the bottom its showing on a Top of the page.
MY code
SingleChildScrollView(
child: Column(
children: [
Container(
height: Height * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/nav.png"),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
isDrawerOpen
? Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
isDrawerOpen = false;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ross.png"),
),
),
),
),
)
: Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 280;
yOffset = 150;
scaleFactor = 0.6;
isDrawerOpen = true;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ic.png"),
),
),
),
),
),
Container(
width: Width * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/logo.png"),
),
),
),
Row(
children: [
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i2.png"),
),
),
),
SizedBox(
width: Width * 0.04,
),
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i1.png"),
),
),
),
SizedBox(
width: Width * 0.06,
),
],
)
],
),
),
),
Stack(
children: <Widget>[
bottomIcons == BottomIcons.Home
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is home page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
bottomIcons == BottomIcons.Favorite
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is favorite page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
bottomIcons == BottomIcons.Search
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is search page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
bottomIcons == BottomIcons.Account
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is account page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
Align(
alignment: Alignment.bottomLeft,
child: Container(
padding: EdgeInsets.only(left: 24, right: 24, bottom: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Home;
});
},
bottomIcons:
bottomIcons == BottomIcons.Home ? true : false,
icons: EvaIcons.home,
text: "Home"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Favorite;
});
},
bottomIcons: bottomIcons == BottomIcons.Favorite
? true
: false,
icons: EvaIcons.heartOutline,
text: "Favorite"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Search;
});
},
bottomIcons: bottomIcons == BottomIcons.Search
? true
: false,
icons: EvaIcons.search,
text: "Search"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Account;
});
},
bottomIcons: bottomIcons == BottomIcons.Account
? true
: false,
icons: EvaIcons.personOutline,
text: "Account"),
],
),
),
)
],
)
// Container(
// padding: EdgeInsets.symmetric(horizontal: 20,vertical: 15),
// margin: EdgeInsets.symmetric(vertical: 30,horizontal: 20),
// decoration: BoxDecoration(
// color: Colors.white,
// borderRadius: BorderRadius.circular(20)
// ),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// Icon(Icons.search),
// Text('Search pet to adopt'),
// Icon(Icons.settings)
//
// ],
// ),
// ),
],
),
)
You can see in image bar is showing on a top of page. I need to show it in bottom of page
Upvotes: 1
Views: 1950
Answers (1)
xbadal
Reputation: 1375
use this.
basically put your widget in Scaffold and pass bottomNavigationBar:YourBottomBar() widget. i have fixed it.
return Scaffold(
bottomNavigationBar: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Home;
});
},
bottomIcons:
bottomIcons == BottomIcons.Home ? true : false,
icons: EvaIcons.home,
text: "Home"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Favorite;
});
},
bottomIcons: bottomIcons == BottomIcons.Favorite
? true
: false,
icons: EvaIcons.heartOutline,
text: "Favorite"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Search;
});
},
bottomIcons: bottomIcons == BottomIcons.Search
? true
: false,
icons: EvaIcons.search,
text: "Search"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Account;
});
},
bottomIcons: bottomIcons == BottomIcons.Account
? true
: false,
icons: EvaIcons.personOutline,
text: "Account"),
],
),
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: Height * 0.1,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/nav.png"),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.only(top: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
isDrawerOpen
? Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 0;
yOffset = 0;
scaleFactor = 1;
isDrawerOpen = false;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ross.png"),
),
),
),
),
)
: Padding(
padding: const EdgeInsets.only(left: 10),
child: GestureDetector(
onTap: () {
setState(() {
xOffset = 280;
yOffset = 150;
scaleFactor = 0.6;
isDrawerOpen = true;
});
},
child: Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/ic.png"),
),
),
),
),
),
Container(
width: Width * 0.25,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/logo.png"),
),
),
),
Row(
children: [
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i2.png"),
),
),
),
SizedBox(
width: Width * 0.04,
),
Container(
height: Height * 0.03,
width: Width * 0.06,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/i1.png"),
),
),
),
SizedBox(
width: Width * 0.06,
),
],
)
],
),
),
),
Stack(
children: <Widget>[
bottomIcons == BottomIcons.Home
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is home page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
bottomIcons == BottomIcons.Favorite
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is favorite page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
bottomIcons == BottomIcons.Search
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is search page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
bottomIcons == BottomIcons.Account
? Container(
height: Height * 0.9,
child: Center(
child: Text(
"Hi, this is account page",
style: TextStyle(fontSize: 18),
),
),
)
: Container(),
Align(
alignment: Alignment.bottomLeft,
child: Container(
padding: EdgeInsets.only(left: 24, right: 24, bottom: 30),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Home;
});
},
bottomIcons:
bottomIcons == BottomIcons.Home ? true : false,
icons: EvaIcons.home,
text: "Home"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Favorite;
});
},
bottomIcons: bottomIcons == BottomIcons.Favorite
? true
: false,
icons: EvaIcons.heartOutline,
text: "Favorite"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Search;
});
},
bottomIcons: bottomIcons == BottomIcons.Search
? true
: false,
icons: EvaIcons.search,
text: "Search"),
BottomBar(
onPressed: () {
setState(() {
bottomIcons = BottomIcons.Account;
});
},
bottomIcons: bottomIcons == BottomIcons.Account
? true
: false,
icons: EvaIcons.personOutline,
text: "Account"),
],
),
),
)
],
)
// Container(
// padding: EdgeInsets.symmetric(horizontal: 20,vertical: 15),
// margin: EdgeInsets.symmetric(vertical: 30,horizontal: 20),
// decoration: BoxDecoration(
// color: Colors.white,
// borderRadius: BorderRadius.circular(20)
// ),
// child: Row(
// mainAxisAlignment: MainAxisAlignment.spaceBetween,
// children: [
// Icon(Icons.search),
// Text('Search pet to adopt'),
// Icon(Icons.settings)
//
// ],
// ),
// ),
],
),
)
)
Upvotes: 2
Related Questions
- Flutter navigation bar
- Why isn't the bottom navigation bar moving between screens in Flutter?
- Container in Bottom Navigation Bar taking whole screen
- Display bottom navigation bar but none of its item is selected
- In Flutter bottom navigation bar should disappear when we navigate to new screen
- Flutter hide bottom navigation bar
- Flutter: How to show content behind bottomNavigationBar
- How to retain navigation bar in flutter
- Bottom Navigation Bar is not chaning screens in Flutter
- How to solve bottom navigation bar missing when navigate to other page in flutter