Flutter Pageview with BottomNavigationBar - Flutter example Pagecontroller

 

Video:

Source Code :

main.dart

import 'package:demo_app/page1.dart'; import 'package:demo_app/page2.dart'; import 'package:demo_app/page3.dart'; import 'package:flutter/material.dart'; void main() { runApp(const MaterialApp( debugShowCheckedModeBanner: false, home: PageViewDemo(), )); } class PageViewDemo extends StatefulWidget { const PageViewDemo({Key? key}) : super(key: key); @override State<PageViewDemo> createState() => _PageViewDemoState(); } class _PageViewDemoState extends State<PageViewDemo> { PageController _pageController = PageController(); int selectedPage = 0; @override void dispose() { // TODO: implement dispose super.dispose(); _pageController.dispose(); } @override Widget build(BuildContext context) { return Scaffold( body: Column(children: [buildPageView(), buildBottomNav()]), ); } Widget buildPageView() { return SizedBox( height: MediaQuery.of(context).size.height * 0.92, child: PageView( controller: _pageController, children: [Page1(), Page2(), Page3()], onPageChanged: (index) { onPageChange(index); }, ), ); } Widget buildBottomNav() { return BottomNavigationBar( currentIndex: selectedPage, items: [ BottomNavigationBarItem(label: "Page1", icon: Icon(Icons.pages)), BottomNavigationBarItem(label: "Page2", icon: Icon(Icons.pages)), BottomNavigationBarItem(label: "Page3", icon: Icon(Icons.pages)), ], onTap: (int index) { _pageController.animateToPage(index, duration: Duration(microseconds: 1000), curve: Curves.easeIn); }, ); } onPageChange(int index) { setState(() { selectedPage = index; }); } }

page1.dart

import 'package:flutter/material.dart'; class Page1 extends StatefulWidget { Page1({Key? key}) : super(key: key); @override State<Page1> createState() => _Page1State(); } class _Page1State extends State<Page1> { @override Widget build(BuildContext context) { return Container( color: Colors.blue, child: Center( child: Text( "Page1", style: TextStyle(color: Colors.white, fontSize: 24), ), ), ); } }

page2.dart

import 'package:flutter/material.dart'; class Page2 extends StatefulWidget { Page2({Key? key}) : super(key: key); @override State<Page2> createState() => _Page2State(); } class _Page2State extends State<Page2> { @override Widget build(BuildContext context) { return Container( color: Color.fromARGB(255, 243, 33, 226), child: Center( child: Text( "Page2", style: TextStyle(color: Colors.white, fontSize: 24), ), ), ); } }

page3.dart

import 'package:flutter/material.dart'; class Page3 extends StatefulWidget { Page3({Key? key}) : super(key: key); @override State<Page3> createState() => _Page3State(); } class _Page3State extends State<Page3> { @override Widget build(BuildContext context) { return Container( color: Color.fromARGB(255, 3, 189, 3), child: Center( child: Text( "Page3", style: TextStyle(color: Colors.white, fontSize: 24), ), ), ); } }