Updated 28 April 2023
A Page View is a scrollable list that works page by page.
Each child of a page view is forced to be the same size as the viewport. Creating PageView in Flutter can be done using the PageView widget which is very easy to use.
You may also check our Flutter app development page.
1.) Create a Scaffold.
2.) Create the PageView as you desire.
3.) Do create a layout using PageController to control which page is visible in the view.
Inside Scaffold widgets, it Implements the basic material design visual layout structure. First, initialize the main app as a stateless widget.
This class provides APIs for showing drawers and bottom sheets. We can add the background color inside the scaffold widget.
It also supports special Material Design components, such as Drawers, AppBars, and SnackBars.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Swipe Page', theme: ThemeData(), home: MyHomePage(title: 'Swipe Page Demo'), ); } } |
Now, use to create a PageView in the flutter we have to call the constructor of the PageView class provided by the flutter.
|
1 2 3 4 5 6 7 8 |
class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } |
A PageController is used to control the PageView.
By using page controller, It is called when the pixel offset of the content inside the PageView. When the state of the page controller also lets you control the offset in terms of pages, which are increments of the viewport size.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
class _MyHomePageState extends State<MyHomePage> { @override Widget build(BuildContext context) { final PageController controller = PageController(); return PageView( /// [PageView.scrollDirection] defaults to [Axis.horizontal]. /// Use [Axis.vertical] to scroll vertically. scrollDirection: Axis.vertical, controller: controller, children: const <Widget>[ Center( child: const Text( 'First Page', style: TextStyle( fontFamily: 'Allison', fontSize: 30, fontWeight: FontWeight.bold, ), ), ), Center( child: const Text( 'Second Page', style: TextStyle( fontFamily: 'Allison', fontSize: 30, fontWeight: FontWeight.bold, ), ), ), Center( child: const Text( 'Third Page', style: TextStyle( fontFamily: 'Allison', fontSize: 30, fontWeight: FontWeight.bold, ), ), ), Center( child: const Text( 'Forth Page', style: TextStyle( fontFamily: 'Allison', fontSize: 30, fontWeight: FontWeight.bold, ), ), ) ], ); } } |
We can now run the app on how to create PageView in a flutter.
Hope this blog helps you to create PageView in a flutter.
So, I hope it will help you out in understanding and getting a brief idea about it.
For more understanding please can go through this Link:
That’s all, You can enjoy your PageView implementation in a flutter.
Thank you very much.
If you have more details or questions, you can reply to the received confirmation email.
Back to Home
Be the first to comment.