Flutter - Bottomnavigationbar - PageView - Reload Page - KeepLive Pages
Last updated Jan 30, 2025Hello Guys, tIn this post I am going to show you how to create BottomNavigationBar and how to Keep Pages live while Navigate to other pages.
Build BottomNavigationBar
Scaffold widget havibg the property called bottomNavigationBar , with this property we will create BottomNavigationBar.
bottomNavigationBar: BottomNavigationBar
(
items:[
BottomNavigationBarItem
(
icon:Icon
(
Icons.home,)
,
title: Text
('HOME
'
,
)
)
]
)
|
To handle the Pages while selecting the TabBarItem
currentIndex: _currentIndex
onTap: (int index){
setState(() {
_currentIndex=index;
});
}
|
To Make Transition while selecting the item
type: BottomNavigationBarType. shifting,
type: BottomNavigationBarType.fixed,
|
Example Code
I have created 5 simple pages with BottomNavigationBar
BottomNavigationWidget
class BottomNavigationWidget extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return BottomNavigationWidgetState();
}
}
class BottomNavigationWidgetState extends State
{
final _bottomNavigationColor = Colors.white;
int _currentIndex = 0;
List list = List();
@override
void initState() {
list
..add(Home())
..add(SearchScreen())
..add(LibraryScreen())
..add(MyCourseScreen())
..add(ProfileScreen());
super.initState();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return SafeArea(
child: Scaffold(
backgroundColor: Colors.grey,
body:list[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.pink,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _bottomNavigationColor,
),
title: Text(
'HOME',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
),
), BottomNavigationBarItem(
icon: Icon(
Icons.search,
color: _bottomNavigationColor,
),
title: Text(
'SEARCH',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.library_books,
color: _bottomNavigationColor,
),
title: Text(
'LIBRARY',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
color: _bottomNavigationColor,
),
title: Text(
'PROFILE',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.book,
color: _bottomNavigationColor,
),
title: Text(
'MY COURSES',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
],currentIndex: _currentIndex,
onTap: (int index){
setState(() {
_currentIndex=index;
});
}, type: BottomNavigationBarType.fixed,),
),
);
}
}
|
Home
class Home extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return HomeState();
}
}
class HomeState extends State{
int count=0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(backgroundColor: Colors.pink,title: Center(child: Text("Home",)),),
body: Container(child: Center(child: Text("Home $count",style: TextStyle(fontSize: 20,color: Colors.purple[600])),),),
floatingActionButton: FloatingActionButton(onPressed: (){
setState(() {
count++;
});
},
child: Icon(Icons.add),backgroundColor: Colors.pink,),
);
}
}
|
SearchScreen
class SearchScreen extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return SearchScreenState();
}
}
class SearchScreenState extends State{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(backgroundColor: Colors.pink,title: Center(child: Text("Search")),),
body: Container(child: Center(child: Text("Search"),),));
}
}
|
Similarly other 3 pages LibraryScreen, MyCoursesPage, ProfilePage
In the above example while selecting the each item it will reload the pages every time,
If we want to keep allive the loaded pages, how we can achive this
Keep - Alive Pages
Lets check the example 2 which contains Bottomnavigationbar with Pageview widget
BottomNavigationViewpager
class BottomNavigationViewpager extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return BottomNavigationViewpagerState();
}
}
class BottomNavigationViewpagerState extends State with SingleTickerProviderStateMixin
{
final _bottomNavigationColor = Colors.white;
int _currentIndex = 0;
var _controller = PageController(
initialPage: 0,
);
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return SafeArea(
child: Scaffold(
backgroundColor: Colors.grey,
body:PageView(
onPageChanged: (index){
setState(() {
_currentIndex=index;
});
},
controller: _controller,
children: [
Home(),
SearchScreen(),
LibraryScreen(),
MyCourseScreen(),
ProfileScreen(),
],
),
bottomNavigationBar: BottomNavigationBar(
backgroundColor: Colors.pink,
items: [
BottomNavigationBarItem(
icon: Icon(
Icons.home,
color: _bottomNavigationColor,
),
title: Text(
'HOME',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
),
), BottomNavigationBarItem(
icon: Icon(
Icons.search,
color: _bottomNavigationColor,
),
title: Text(
'SEARCH',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.library_books,
color: _bottomNavigationColor,
),
title: Text(
'LIBRARY',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.account_circle,
color: _bottomNavigationColor,
),
title: Text(
'PROFILE',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
BottomNavigationBarItem(
icon: Icon(
Icons.book,
color: _bottomNavigationColor,
),
title: Text(
'MY COURSES',
style: TextStyle(color: _bottomNavigationColor,fontSize: 12),
)
),
],currentIndex: _currentIndex,
onTap: (int index){
_controller.jumpToPage(index);
setState(() {
_currentIndex=index;
});
}, type: BottomNavigationBarType.fixed,),
),
);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
}
|
Now lets change the above pages with small code extend class with AutomaticKeepAliveClientMixin
Home Page
class Home extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return HomeState();
}
}
class HomeState extends Statewith AutomaticKeepAliveClientMixin {
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
int count=0;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(backgroundColor: Colors.pink,title: Center(child: Text("Home",)),),
body: Container(child: Center(child: Text("Home $count",style: TextStyle(fontSize: 20,color: Colors.purple[600])),),),
floatingActionButton: FloatingActionButton(onPressed: (){
setState(() {
count++;
});
},
child: Icon(Icons.add),backgroundColor: Colors.pink,),
);
}
}
|
Search Page
class SearchScreen extends StatefulWidget{
@override
State createState() {
// TODO: implement createState
return SearchScreenState();
}
}
class SearchScreenState extends Statewith AutomaticKeepAliveClientMixin {
@override
// TODO: implement wantKeepAlive
bool get wantKeepAlive => true;
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(backgroundColor: Colors.pink,title: Center(child: Text("Search")),),
body: Container(child: Center(child: Text("Search"),),));
}
}
|
Change other pages too
Now lets run the app and check the count of increment in homepage after revisiting, it will show the previous count.
Article Contributed By :
|
|
|
|
5666 Views |