Video:
Source Code :
main.dart
xxxxxxxxxximport '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
xxxxxxxxxximport '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
xxxxxxxxxximport '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
xxxxxxxxxximport '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), ), ), ); }}​
.jpg)
