Flutter: PageView examples

This practical article walks you through a couple of different examples of implementing the PageView widget in Flutter. The first example is simple and straightforward, while the second one is a little bit complex because it goes with a dot indicator. Before writing code, let’s explore the fundamentals.

The Fundamentals

According to the official docs, the PageView widget is used to create a scrollable list that works page by page. One of the most common use cases is carousel/slideshow images which you can come across in many places on the web or in mobile apps.

You can construct a PageView from an explicit list of widgets by using this constructor:

PageView({
  Key? key, 
  Axis scrollDirection = Axis.horizontal, 
  bool reverse = false, 
  PageController? controller, 
  ScrollPhysics? physics, 
  bool pageSnapping = true, 
  ValueChanged<int>? onPageChanged, 
  List<Widget> children = const <Widget>[], 
  DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
  bool allowImplicitScrolling = false, 
  String? restorationId, 
  Clip clipBehavior = Clip.hardEdge, 
  ScrollBehavior? scrollBehavior, 
  bool padEnds = true
})

If you want to implement a PageView that uses widgets that are created on demand (e.g., dynamic items loaded from a remote server), use this constructor:

PageView.builder({
  Key? key, 
  Axis scrollDirection = Axis.horizontal, 
  bool reverse = false, 
  PageController? controller, 
  ScrollPhysics? physics, 
  bool pageSnapping = true, 
  ValueChanged<int>? onPageChanged, 
  required NullableIndexedWidgetBuilder itemBuilder, 
  ChildIndexGetter? findChildIndexCallback, 
  int? itemCount, 
  DragStartBehavior dragStartBehavior = DragStartBehavior.start, 
  bool allowImplicitScrolling = false, 
  String? restorationId, 
  Clip clipBehavior = Clip.hardEdge, 
  ScrollBehavior? scrollBehavior, 
  bool padEnds = true
})

To get a better understanding, let’s examine the upcoming examples

Minimum Viable Example

Preview

The Code

The full source code in main.dart with explanations:

// kindacode.com
// PageView example
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'KindaCode.com',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue),
          useMaterial3: true,
        ),
        home: const KindaCode());
  }
}

class KindaCode extends StatefulWidget {
  const KindaCode({Key? key}) : super(key: key);

  @override
  State<KindaCode> createState() => _KindaCodeState();
}

class _KindaCodeState extends State<KindaCode> {
  // Declare and Initialize the PageController
  final PageController _pageController =
      PageController(initialPage: 0, viewportFraction: 1);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _pageController,
        children: const [PageOne(), PageTwo(), PageThree()],
      ),
    );
  }

  // Dispose the PageController
  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }
}

// Page One
class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: Colors.indigo,
      child: const Text(
        'Page 1',
        style: TextStyle(fontSize: 50, color: Colors.white),
      ),
    );
  }
}

// Page Two
class PageTwo extends StatelessWidget {
  const PageTwo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        color: Colors.green,
        child: const Text(
          'Page 2',
          style: TextStyle(fontSize: 50, color: Colors.white),
        ));
  }
}

// Page Three
class PageThree extends StatelessWidget {
  const PageThree({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        color: Colors.amber,
        child: const Text(
          'Page 3',
          style: TextStyle(fontSize: 50, color: Colors.black),
        ));
  }
}

PageView with Dots Indicator

Preview

This example is an enhancement of the preceding one. It displays a PageView with a dot indicator. Each page is associated with a dot. The dot corresponding to the current page will have a different color than the other dots. Furthermore, users can move between pages by swiping left, right, or tapping on a dot. Here’s how it works in action:

The Code

The complete code in main.dart with explanations in the comments:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        // remove the debug banner
        debugShowCheckedModeBanner: false,
        title: 'KindaCode.com',
        theme: ThemeData(
          useMaterial3: true,
        ),
        home: const KindaCodeDemo());
  }
}

// Construct Dots Indicator

class KindaCodeDemo extends StatefulWidget {
  const KindaCodeDemo({Key? key}) : super(key: key);

  @override
  State<KindaCodeDemo> createState() => _KindaCodeDemoState();
}

class _KindaCodeDemoState extends State<KindaCodeDemo> {
  // declare and initizlize the page controller
  final PageController _pageController = PageController(initialPage: 0);

  // the index of the current page
  int _activePage = 0;

  // this list holds all the pages
  // all of them are constructed in the very end of this file for readability
  final List<Widget> _pages = [
    const PageOne(),
    const PageTwo(),
    const PageThree()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // the page view
          PageView.builder(
            controller: _pageController,
            onPageChanged: (int page) {
              setState(() {
                _activePage = page;
              });
            },
            itemCount: _pages.length,
            itemBuilder: (BuildContext context, int index) {
              return _pages[index % _pages.length];
            },
          ),
          // Display the dots indicator
          Positioned(
            bottom: 0,
            left: 0,
            right: 0,
            height: 100,
            child: Container(
              color: Colors.black54,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: List<Widget>.generate(
                    _pages.length,
                    (index) => Padding(
                          padding: const EdgeInsets.symmetric(horizontal: 10),
                          child: InkWell(
                            onTap: () {
                              _pageController.animateToPage(index,
                                  duration: const Duration(milliseconds: 300),
                                  curve: Curves.easeIn);
                            },
                            child: CircleAvatar(
                              radius: 8,
                              // check if a dot is connected to the current page
                              // if true, give it a different color
                              backgroundColor: _activePage == index
                                  ? Colors.amber
                                  : Colors.grey,
                            ),
                          ),
                        )),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

// Page One
class PageOne extends StatelessWidget {
  const PageOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: Colors.pink,
      child: const Text(
        'KindaCode.com',
        style: TextStyle(fontSize: 30, color: Colors.white),
      ),
    );
  }
}

// Page Two
class PageTwo extends StatelessWidget {
  const PageTwo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        color: Colors.green,
        child: const Text(
          'Green Page',
          style: TextStyle(fontSize: 50, color: Colors.white),
        ));
  }
}

// Page Three
class PageThree extends StatelessWidget {
  const PageThree({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        alignment: Alignment.center,
        color: Colors.blue,
        child: const Text(
          'Blue Page',
          style: TextStyle(fontSize: 50, color: Colors.white),
        ));
  }
}

Afterword

We’ve walked through a few examples of the PageView widget in Flutter to create nice and interactive user interfaces. From this time forward, you’ll have a solid knowledge to harness in many situations related to lists of widgets that work page by page. Continue learning and strengthening your skills by taking a look at the following articles:

• Flutter & VS Code: Auto Trigger Hot Reload on Save
• How to Parse and Render XML Data in Flutter
• Flutter: Best Packages to Create Cool Bottom App Bars
• Flutter: Giving a Size to a CircularProgressIndicator
• Flutter: Get Current Scroll Offset in ListView/GridView
• How to make an image carousel in Flutter

You can also tour around our Flutter topic page or Dart topic page for the most recent tutorials and examples.