Hey friends, In today’s tutorial we would learn about creating custom full page horizontal scrollable view using PageView widget. In flutter the PageView is used to make multiple widgets combine view on a single screen with multiple widgets. The best thing of this widget is It will automatically occupied all the space on a screen for a single view. PageView widget can also be scroll vertically. So in this tutorial we would use the PageView widget to create Flutter Full Page Scrollable Horizontal Scroll View in Android and iOS application.
Contents in this project Flutter Full Page Scrollable Horizontal ScrollView Example :-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Root class MyApp extends StatelessWidget. In this class we would our App class.
|
1 2 3 4 5 6 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: App())); } } |
4. Creating App extends StatefulWidget class. In this class we would call AppState class with createState() method to enable mutable state management.
|
1 2 3 |
class App extends StatefulWidget { AppState createState() => AppState(); } |
5. Creating AppState class extends State. This is our main Child class with State enable.
|
1 2 3 4 5 |
class AppState extends State<App> { } |
6. Creating a page controller named as controller. Using this controller we can control which page in the PageView widget we want to show on the app start time.
|
1 2 3 |
final controller = PageController( initialPage: 0, ); |
7. Creating Widget Build area -> Scaffold widget -> center widget -> PageView widget. Now here we would make 1 Center view which is our first screen, 2 Container view which is 2nd and 3rd view.
|
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 |
@override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Full Page Width Swipeable Horizontal ScrollView in Flutter')), body: Center( child: PageView( controller: controller, onPageChanged: (page) => {print(page.toString())}, pageSnapping: true, scrollDirection: Axis.horizontal, children: <Widget>[ Container( color: Colors.cyan, child: Center( child: Text( 'This is Page 1', style: TextStyle( fontSize: 26, color: Colors.white, fontWeight: FontWeight.bold), ))), Container( color: Colors.green, child: Center( child: Text( 'This is Page 2', style: TextStyle(fontSize: 26, color: Colors.white), ))), Container( color: Colors.purple, child: Center( child: Text( 'This is Page 3', style: TextStyle(fontSize: 26, color: Colors.white), ))), ], ), )); } |
8. 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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(home: Scaffold(body: App())); } } class App extends StatefulWidget { AppState createState() => AppState(); } class AppState extends State<App> { final controller = PageController( initialPage: 0, ); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text( 'Full Page Width Swipeable Horizontal ScrollView in Flutter')), body: Center( child: PageView( controller: controller, onPageChanged: (page) => {print(page.toString())}, pageSnapping: true, scrollDirection: Axis.horizontal, children: <Widget>[ Container( color: Colors.cyan, child: Center( child: Text( 'This is Page 1', style: TextStyle( fontSize: 26, color: Colors.white, fontWeight: FontWeight.bold), ))), Container( color: Colors.green, child: Center( child: Text( 'This is Page 2', style: TextStyle(fontSize: 26, color: Colors.white), ))), Container( color: Colors.purple, child: Center( child: Text( 'This is Page 3', style: TextStyle(fontSize: 26, color: Colors.white), ))), ], ), )); } } |
Screenshots:-
