PageView widget in Flutter

<p>PageView in flutter is a scrollable list that works page by page. In this example, I've shared the code to use PageView widget in flutter. Below Screenshort refers to the final output, that you get by running the example code. ![](https://fluttercentral.com/Uploads/7127b0cf-fcbc-4e50-8588-ada14e0eb73c.gifwidth="50%height="auto](</p> <p>Before you go through the whole code, the important points are, We use a PageController to control which page is visible in the view. The initialpage determines which page to be shown when the PageView is first constructed. This is then assigned to the PageView widget. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;]( color: #569cd6;](final controller = color: #4ec9b0;](PageController( initialPage: color: #b5cea8;](1, );</p> <p>Here is the full code on how to create a PageView widget in Flutter. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp()); color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( title: color: #ce9178;]('Flutter PageView Demo', theme: color: #4ec9b0;](ThemeData( primarySwatch: color: #4ec9b0;](Colors.blue, ), home: color: #4ec9b0;](MyHomePage(title: color: #ce9178;]('Flutter PageView Demo'), ); }} color: #569cd6;](class color: #4ec9b0;](MyHomePage color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #4ec9b0;](MyHomePage({color: #4ec9b0;](Key key, color: #569cd6;](this.title}) : color: #569cd6;](super(key: key); color: #569cd6;](final color: #4ec9b0;](String title; color: #569cd6;](@override color: #4ec9b0;](_MyHomePageState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyHomePageState();} color: #569cd6;](class color: #4ec9b0;](_MyHomePageState color: #569cd6;](extends color: #4ec9b0;](State { color: #569cd6;](final controller = color: #4ec9b0;](PageController( initialPage: color: #b5cea8;](1, ); color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #4ec9b0;](TextStyle textStyle = color: #4ec9b0;](TextStyle( color: color: #4ec9b0;](Colors.blue, fontWeight: color: #4ec9b0;](FontWeight.w800, fontFamily: color: #ce9178;]('Roboto', letterSpacing: color: #b5cea8;](0.5, fontSize: color: #b5cea8;](30, height: color: #b5cea8;](2, ); color: #c586c0;](return color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(widget.title), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](PageView( controller: controller, children: [ color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("Hello1", style: textStyle,)), color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("Hello2", style: textStyle,)), color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("Hello3", style: textStyle,)), color: #4ec9b0;](Center(child: color: #4ec9b0;](Text(color: #ce9178;]("Hello4", style: textStyle,)), ], ), ), ); }}</p> <p>Thanks,Srikanth</p>