I want to add a bottom navigation bar for my code. but don't know where to add it properly. is it possible to add it in a stack? if not how do I add a navigation bar to my code without errors? can someone please suggest to me what to do about this? here's my home.dart and bottom navigation bar code I hope to add.
home.dart
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget{
@override
_HomePageState createState() => _HomePageState();}
class _HomePageState extends State <HomePage>{
@override
Widget build (BuildContext context){
return Scaffold(
backgroundColor: Color(0xffEDEFF4),
body: Padding(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
child: ListView (
children: [
buildSearchInput(),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Banana",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/banana.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Tangerine",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/orange.png"),
),
),
],
),
Stack(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(0, 45, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: Color(0xffCAEC93),
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Kiwi",
style: TextStyle(
fontFamily:'Roboto',
fontSize: 22,
color: Colors.black,
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
],
)
)
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/kiwi.png"),
),
),
],
),
],
),
),
);
}
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(14)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey.shade300,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
Widget buildCard()=> Container (
height: 23,
width: 90,
color: Color(0xffE6E848),
);
}
my code for bottom navigation bar
Stack(
children: [
bottomNaavigationBar:BottomNaavigationBar(
items:[
BottomNavigationBarItem(
icon:Icon(Icons.Icons.home),
backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon:Icon(Icons.Icons.Icons.favorite),
label:'Feed'
backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon:Icon(Icons.Icons.chat),
label:'Chat'
backgroundColor:Colors.blue,
),
BottomNavigationBarItem(
icon:Icon(Icons.Icons.person),
label:'Profile'
backgroundColor:Colors.blue,
),
),
],
),
CodePudding user response：
Scaffold has a property bottomNavigationBar
Use it like so:
Scaffold(
bottomNavigationBar: BottomNavigationBar(
items: [],
),
...
)
CodePudding user response：
You can add it in Scaffold, sure if you want. Here is BottomNavBar example with PageView.
Let's define a pageController and currentTab variable for PageView inside our class,
PageController _pageController = PageController();
int _currentTab = 0;
Then we can initialize our controller for initial page.
@override
void initState() {
_pageController = PageController(initialPage: _currentTab);
super.initState();
}
Then here our view codes.
Scaffold(
drawer: const CustomDrawerWidget(),
bottomNavigationBar: BottomAppBar(
shape: const CircularNotchedRectangle(),
child: BottomNavigationBar(
currentIndex: _currentTab,
iconSize: 24,
selectedItemColor: Theme.of(context).colorScheme.primary,
type: BottomNavigationBarType.fixed,
items: _items,
onTap: (index) {
setState(() {
_pageController.jumpToPage(index);
});
},
),
),
body: PageView(
physics: const NeverScrollableScrollPhysics(),
pageSnapping: true,
controller: _pageController,
children: _pages,
onPageChanged: (page) {
setState(() {
_currentTab = page;
});
},
),
);
BottomNavigationBar items:
const _items = [
BottomNavigationBarItem(icon: Icon(Icons.home), label: "Feed"),
BottomNavigationBarItem(icon: Icon(Icons.people), label: "Chat"),
BottomNavigationBarItem(icon: Icon(Icons.person), label: "Profile"),
];
Here is page list:
const _pages= [
FeedPage(),
ChatPage(),
ProfilePage(),
];