skills/flutter/references/widgets-pageview.md

name	description
widgets-pageview	Flutter PageView - swipeable pages, PageController, and page navigation

PageView

PageView displays a scrollable list of pages that users can swipe between.

Basic PageView

PageView(
  children: [
    Container(color: Colors.red, child: Center(child: Text('Page 1'))),
    Container(color: Colors.green, child: Center(child: Text('Page 2'))),
    Container(color: Colors.blue, child: Center(child: Text('Page 3'))),
  ],
)

PageController

Control page navigation programmatically.

class PageViewExample extends StatefulWidget {
  const PageViewExample({super.key});

  @override
  State<PageViewExample> createState() => _PageViewExampleState();
}

class _PageViewExampleState extends State<PageViewExample> {
  final PageController _controller = PageController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Expanded(
          child: PageView(
            controller: _controller,
            children: [
              Container(color: Colors.red),
              Container(color: Colors.green),
              Container(color: Colors.blue),
            ],
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () => _controller.previousPage(
                duration: Duration(milliseconds: 300),
                curve: Curves.easeInOut,
              ),
              child: const Text('Previous'),
            ),
            ElevatedButton(
              onPressed: () => _controller.nextPage(
                duration: Duration(milliseconds: 300),
                curve: Curves.easeInOut,
              ),
              child: const Text('Next'),
            ),
          ],
        ),
      ],
    );
  }
}

PageView.builder

Build pages on demand.

PageView.builder(
  itemCount: pages.length,
  itemBuilder: (context, index) {
    return Container(
      color: Colors.blue,
      child: Center(child: Text('Page $index')),
    );
  },
)

PageView Properties

PageView(
  scrollDirection: Axis.horizontal, // horizontal, vertical
  reverse: false, // Reverse scroll direction
  controller: _controller,
  physics: PageScrollPhysics(), // ClampingScrollPhysics, BouncingScrollPhysics
  pageSnapping: true, // Snap to pages
  onPageChanged: (index) {
    print('Page changed to $index');
  },
  children: [...],
)

Initial Page

PageController(
  initialPage: 2, // Start at page 2
  viewportFraction: 1.0, // Page width fraction (0.0 to 1.0)
)

PageView(
  controller: PageController(initialPage: 1),
  children: [...],
)

Viewport Fraction

Show multiple pages at once.

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

Key Points

• Use PageView for swipeable pages
• Use PageController to control navigation
• Use PageView.builder for dynamic pages
• Set scrollDirection for horizontal/vertical scrolling
• Use onPageChanged to track page changes
• Set viewportFraction to show multiple pages
• Always dispose PageController
• Use pageSnapping to snap to pages