PageView widget in flutter is used to make Swipeable widget list. PageView widget support both Vertical and Horizontal swipeable scrolling. In PageView widget each child widget should be in same as Parent View port. If your parent widget size is full screen then it will make the swipeable widgets full screen. So in this tutorial we would Flutter PageView Widget To Create Swipeable View in Android iOS Example Tutorial.
Contents in this project Flutter PageView Widget To Create Swipeable View in Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create void main runApp() method and here we would call our main Root MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main Root View class named as MyApp extends with StatelessWidget. In this class we would call the Page class.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Page() ) ); } } |
4. Create a class named as Page extends with StatefulWidget. In this class we would call the createState() method of State and define the PageState class along with it.
|
1 2 3 4 5 |
class Page extends StatefulWidget { PageState createState() => PageState(); } |
5. Create a class named as PageState extends with State.
|
1 2 3 4 |
class PageState extends State<Page>{ } |
6. Create a PageController with initial Page value as Zero. Here Zero is our Index page widget number. Using this we can decide which widget should display first on app starts.
|
1 2 3 |
final controller = PageController( initialPage: 0, ); |
7. Create Widget Build area in PageState class. Now we would make Scaffold widget -> Center Widget.
|
1 2 3 4 5 6 7 8 9 10 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('PageView Widget in Flutter')), body: Center(child: ), ); } |
8. Creating PageView widget in Center widget with 3 Child Container widget.
- controller : Used to control which widgets displays first on screen.
- onPageChanged : Calls every time when Widgets changes in PageView.
- pageSnapping : To enable and disable page snapping.
- scrollDirection : Used to make scrolling in horizontal and Vertical direction.
|
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 |
PageView( controller: controller, onPageChanged: (page)=>{ print(page.toString()) }, pageSnapping: true, scrollDirection: Axis.horizontal, children: <Widget>[ Container( color: Colors.pink, child: Center( child: Text('This is Widget 1', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( color: Colors.green, child: Center( child: Text('This is Widget - 2', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( color: Colors.lightBlue, child: Center( child: Text('This is Widget - 3', style: TextStyle(fontSize: 25, color: Colors.white),)) ), ], ), |
9. Complete source code for main.dart file:
|
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 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Page() ) ); } } class Page extends StatefulWidget { PageState createState() => PageState(); } class PageState extends State<Page>{ final controller = PageController( initialPage: 0, ); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('PageView Widget in Flutter')), body: Center(child: PageView( controller: controller, onPageChanged: (page)=>{ print(page.toString()) }, pageSnapping: true, scrollDirection: Axis.horizontal, children: <Widget>[ Container( color: Colors.pink, child: Center( child: Text('This is Widget 1', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( color: Colors.green, child: Center( child: Text('This is Widget - 2', style: TextStyle(fontSize: 25, color: Colors.white),)) ), Container( color: Colors.lightBlue, child: Center( child: Text('This is Widget - 3', style: TextStyle(fontSize: 25, color: Colors.white),)) ), ], ), ) ); } } |
Screenshots:
