PageView Widget

Introduction of PageView Widget

The PageView widget in Flutter is used to create a scrollable list of pages or screens, where each page typically represents a distinct piece of content. It’s commonly used for implementing features like onboarding screens, image carousels, or any scenario where you need horizontal swiping between different content.

Here’s a short explanation of some of the key properties:

children Property: The primary property that takes a list of widgets representing the individual pages within the PageView Widget.

PageView(
  children: [
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
  ],
),

controller Property: An optional PageController that can be used to control the behavior of the PageView, such as setting the initial page or listening to page changes.

PageView(
  controller: PageController(initialPage: 1),
  children: [
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
  ],
),

scrollDirection Property: Specifies the scroll direction, either horizontal or vertical. The default is Axis.horizontal.

PageView(
  scrollDirection: Axis.vertical,
  children: [
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
  ],
),

physics Property: Defines the physics of the scroll behavior, such as how the scrolling responds to user input.

PageView(
  physics: BouncingScrollPhysics(),
  children: [
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
  ],
),

pageSnapping Property: Determines whether the PageView should snap to the nearest page after scrolling.

PageView(
  pageSnapping: false,
  children: [
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
  ],
),

onPageChanged Callback: A callback that is invoked whenever the page changes. It provides the index of the newly selected page.

PageView(
  onPageChanged: (int pageIndex) {
    print('Page changed to: $pageIndex');
  },
  children: [
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
  ],
),

pageController Property: An alternative to controller, accepts a PageController for more fine-grained control.

PageView(
  pageController: PageController(viewportFraction: 0.8),
  children: [
    Container(color: Colors.blue),
    Container(color: Colors.green),
    Container(color: Colors.red),
  ],
),

Final Code: This is the final code with the combination of some above PageView widget properties.

import 'package:flutter/material.dart';
import 'package:studymaterial/post/post_1.dart';
import 'package:studymaterial/post/post_2.dart';
import 'package:studymaterial/post/post_3.dart';

class HomePage extends StatelessWidget {
  HomePage({super.key});

  final _controller = PageController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: PageView(
        controller: _controller,
        children: const [
          MyPost1(),
          MyPost2(),
          MyPost3(),
        ],
      ),
    );
  }
}

In above code, we linked 3 files with the same code but different color, and the code is below:

import 'package:flutter/material.dart';

class MyPost1 extends StatelessWidget {
  const MyPost1({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.deepOrange,
    );
  }
}

In this example, a PageView widget is created with three pages, each represented by a colored container. Users can swipe horizontally to navigate between these pages. Adjust the properties according to your specific use case and styling preferences.

Thank for visiting Hybrid App Development
Posted by Hussam HM