So I'm working on project with flutter. First I want to know if using a bottom Navigation Bar is better than creating a container for it. Now my question, how do I navigate to a page by using this bottom Navigation bar? Like should I build an entire page and bottom navigation bar for each one? OR Can I build everything in one place ?
This a part of it
void main() => runApp(MyApp());
class ProfilePage extends StatefulWidget {
@override
State<ProfilePage> createState() => _ProfilePageState();
}
class _ProfilePageState extends State<ProfilePage> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('HOME'),
centerTitle: true,
backgroundColor: Colors.green[900],
leading: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {
Navigator.pop(context);
},
),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [],
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.green[900],
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
label: 'Home',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.calendar_today,
),
label: 'Days',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.local_activity,
),
label: 'Activity',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
),
label: 'Settings',
backgroundColor: Colors.green[900],
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.white,
onTap: _onItemTapped,
),
),
);
}
}
This is how it looks but don't know how to navigate between screens.
CodePudding user response：
you PageView class for change pages
Change Column to Pageview
final PageController controller = PageController();
return PageView(
/// [PageView.scrollDirection] defaults to [Axis.horizontal].
/// Use [Axis.vertical] to scroll vertically.`enter code here`
controller: controller,
children: const <Widget>[
Center(
child: Text('First Page'),
),
Center(
child: Text('Second Page'),
),
Center(
child: Text('Third Page'),
)
],
);
}
change in your method
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
controller.jumpToPage(index);
});
}
CodePudding user response：
check this complete code.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bottom NavBar Demo',
theme: ThemeData(
primaryColor: const Color(0xff2F8D46),
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
hoverColor: Colors.transparent,
),
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
int pageIndex = 0;
void _onItemTapped(int index) {
setState(() {
pageIndex = index;
});
}
final pages = [
const Page1(),
const Page2(),
const Page3(),
const Page4(),
];
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xffC4DFCB),
appBar: AppBar(
title: Text(
"Navigation bar",
style: TextStyle(
color: Theme.of(context).primaryColor,
fontSize: 25,
fontWeight: FontWeight.w600,
),
),
centerTitle: true,
backgroundColor: Colors.white,
),
body: pages[pageIndex],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.green[900],
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(
Icons.home,
),
label: 'Home',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.calendar_today,
),
label: 'Days',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.local_activity,
),
label: 'Activity',
backgroundColor: Colors.green[900],
),
BottomNavigationBarItem(
icon: Icon(
Icons.settings,
),
label: 'Settings',
backgroundColor: Colors.green[900],
),
],
currentIndex: pageIndex,
selectedItemColor: Colors.white,
onTap: _onItemTapped,
),
);
}
Container buildMyNavBar(BuildContext context) {
return Container(
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).primaryColor,
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 0;
});
},
icon: pageIndex == 0
? const Icon(
Icons.home_filled,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.home_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 1;
});
},
icon: pageIndex == 1
? const Icon(
Icons.work_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.work_outline_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 2;
});
},
icon: pageIndex == 2
? const Icon(
Icons.widgets_rounded,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.widgets_outlined,
color: Colors.white,
size: 35,
),
),
IconButton(
enableFeedback: false,
onPressed: () {
setState(() {
pageIndex = 3;
});
},
icon: pageIndex == 3
? const Icon(
Icons.person,
color: Colors.white,
size: 35,
)
: const Icon(
Icons.person_outline,
color: Colors.white,
size: 35,
),
),
],
),
);
}
}
class Page1 extends StatelessWidget {
const Page1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 1",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page2 extends StatelessWidget {
const Page2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 2",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page3 extends StatelessWidget {
const Page3({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 3",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
class Page4 extends StatelessWidget {
const Page4({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
color: const Color(0xffC4DFCB),
child: Center(
child: Text(
"Page Number 4",
style: TextStyle(
color: Colors.green[900],
fontSize: 45,
fontWeight: FontWeight.w500,
),
),
),
);
}
}
CodePudding user response：
You don't need to create a BnB for each screen, you can create a navbar on the main screen
and in the build method return the corresponding page, based on the selected index.