PageView widget and Attributes

PageView widget and Attributes

ยท

2 min read

The PageView widget in Flutter is used to create a scrollable list of pages, each of which occupies the entire screen. It's commonly used for implementing screen slides, such as image slideshows or onboarding screens.

Attributes:

  1. children (List<Widget>):

    • The list of widgets representing the pages to be displayed in the PageView.
  2. scrollDirection (Axis):

    • The axis along which the pages should be scrolled. It can be either Axis.horizontal for horizontal scrolling or Axis.vertical for vertical scrolling. The default value is Axis.horizontal.
  3. controller (PageController):

    • An optional controller that allows you to control the current page and listen to page change events.
  4. physics (ScrollPhysics):

    • The physics of the scrolling behavior. For example, you can use BouncingScrollPhysics() for iOS-like bouncing effect or ClampingScrollPhysics() for Android-like clamping effect.
  5. pageSnapping (bool):

    • Whether to snap pages to the closest boundary during scrolling. If set to true, the pages will snap to the closest boundary when released. The default value is true.
  6. onPageChanged (Function(int)):

    • An optional callback that is called when the page changes. It provides the index of the new page.

Example:

import 'package:flutter/material.dart';

class PageViewExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('PageView Widget Example'),
      ),
      body: PageView(
        scrollDirection: Axis.horizontal,
        children: [
          Container(color: Colors.red),
          Container(color: Colors.blue),
          Container(color: Colors.green),
        ],
      ),
    );
  }
}

void main() {
  runApp(MaterialApp(
    home: PageViewExample(),
  ));
}

Explanation:

  • In this example, a PageView widget is used to create a horizontal scrollable list of pages.

  • The scrollDirection attribute is set to Axis.horizontal to enable horizontal scrolling.

  • The children attribute contains a list of Container widgets, each representing a page with a different background color.

  • When you run this code, you'll see a screen with a horizontal scrollable list of three pages, each with a different background color. You can swipe left or right to navigate between pages.

Did you find this article valuable?

Support Vinit Mepani by becoming a sponsor. Any amount is appreciated!

ย