CodingWithDhrumil

Learn Mobile App Development

Flutter Slider 

PageView Flutter With Example

Dhrumil Shah 3 Comments , , , , ,

This tutorial helps you to integrate pageview widget to slide pages in flutter applications. PageView widget is used to generate scrollable pages in flutter applications.

We can use pageview by multiple ways. We can use simple pageview with fixed number of pages. We can also use builder function of pageview to generate dynamic amount of pages. We can also customize pageview using custom method of pageview widget.

 

Home Screen

class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    SizedBox(
        height: 15,
    ),
    RaisedButton(
        textColor: Colors.white,
        color: Colors.deepOrangeAccent,
        child: Text(“Basic”, style: TextStyle(fontSize: 25)),
        onPressed: () {
            Navigator.push( context, MaterialPageRoute(builder: (context) => BasicPageScreen()), );
        },
    ),
    SizedBox(
        height: 15,
    ),
    RaisedButton(
        textColor: Colors.white,
        color: Colors.teal,
        child: Text(“Vertical”, style: TextStyle(fontSize: 25)),
        onPressed: () {
            Navigator.push( context, MaterialPageRoute( builder: (context) => VerticalPageViewScreen()),);
        },
    ),
    SizedBox(
        height: 15,
    ),
    RaisedButton(
        textColor: Colors.white,
        color: Colors.blue,
        child: Text(“Viewport Fraction”, style: TextStyle(fontSize: 25)),
        onPressed: () {
            Navigator.push( context, MaterialPageRoute( builder: (context) => ViewPortFractionPageViewScreen()), );
        },
    ),
    SizedBox(
        height: 15,
    ),
    RaisedButton(
        textColor: Colors.white,
        color: Colors.deepPurple,
        child: Text(“Page Snapping”, style: TextStyle(fontSize: 25)),
        onPressed: () {
            Navigator.push( context, MaterialPageRoute( builder: (context) => PageSnappingPageViewScreen()), );
        },
    ),
    SizedBox(
        height: 15,
    ),
    RaisedButton(
        textColor: Colors.white,
        color: Colors.pink,
        child: Text(“Scroll Physics”, style: TextStyle(fontSize: 25)),
        onPressed: () {
            Navigator.push( context, MaterialPageRoute(builder: (context) => ScrollPhysicsPageViewScreen()), );
        },
    ),
    ],
),
),
),
);
}
}

 
 
 

Basic PageView Flutter

PageView(
children: <Widget>[
Container(
    color: Colors.pinkAccent,
    padding: EdgeInsets.all(50),
    child: Column(
    children: [
        SizedBox(height: 75),
        Image.asset(‘images/premier_league_logo.jpg’),
        SizedBox(height: 25),
        Text(‘Premier League’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
    ],
),
),
Container(
    color: Colors.deepOrangeAccent,
    padding: EdgeInsets.all(50),
    child: Column(
    children: [
        SizedBox(height: 75),
        Image.asset(‘images/laliga_logo.png’),
        SizedBox(height: 25),
        Text(‘La Liga’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
    ],
),
),
Container(
    color: Colors.redAccent,
    padding: EdgeInsets.all(50),
    child: Column(
    children: [
        SizedBox(height: 75),
        Image.asset(‘images/bundesliga_logo.jpg’),
        SizedBox(height: 25),
        Text(‘Bundesliga’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
    ],
),
),
Container(
    color: Colors.blueAccent,
    padding: EdgeInsets.all(50),
    child: Column(
    children: [
        SizedBox(height: 75),
        Image.asset(‘images/serie_a_logo.jpg’),
        SizedBox(height: 25),
        Text(‘Serie A’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
    ],
),
),
Container(
    color: Colors.amberAccent,
    padding: EdgeInsets.all(50),
    child: Column(
    children: [
        SizedBox(height: 75),
        Image.asset(‘images/ligue_one_logo.png’),
        SizedBox(height: 25),
        Text(‘Ligue 1’, style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25, decoration: TextDecoration.none),)
    ],
),
),
],
);
 
pageview flutter
 
 

Vertical PageView Flutter

By default pages can scroll in horizontal direction. We can also change orientation of pageview widget with the help of scrollDirection parameter.

PageView(
    scrollDirection: Axis.vertical,
);
 
pageview flutter
 
 

Viewport Fraction

We can also make pageview widget like carousel slider by setting viewportfraction parameter less than 1.0.

PageController pageController = PageController(
    viewportFraction: 0.8
);

PageView(
    controller: pageController,
);

 
 
 

Page Snapping

By default you can scroll full width of page and slide only one page at a time. Using pagesnapping property of pageview widget, we can scroll smoothly and we do not have to require to stop at any particular spot.

PageView(
    pageSnapping: false,
);
 
 
 

Scroll Physics

We can change behavior of pageview widget when it reaches to first or last page.

PageView(
    physics: BouncingScrollPhysics(),
);
 
 

You May Also Like

Exploring Flutter Carousel Slider

Dhrumil Shah 3
velocityx swiper

VelocityX Swiper Flutter Example

Dhrumil Shah 3
intro slider

Setting Intro Slider in Flutter Applications

Dhrumil Shah 1

3 thoughts on “PageView Flutter With Example”

Leave a Reply