Flutter - Bottomnavigationbar - PageView - Reload Page - KeepLive Pages

Hello 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.

 




Related Questions View All