erweiterbare Seitenansicht

expandable_page_view

A PageView widget adjusting its height to currently displayed page. It accepts the same parameters as classic PageView.

Horizontal	Vertical

Getting Started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  ...
  expandable_page_view: ^1.0.17

Import it:

import 'package:expandable_page_view/expandable_page_view.dart';

Usage Examples

Fixed Expandable Page View

In order to create a fixed page view just pass a list of widgets to children parameter:

ExpandablePageView(
  children: [
     ExamplePage(Colors.blue, "1", 100),
     ExamplePage(Colors.green, "2", 200),
     ExamplePage(Colors.red, "3", 300),
  ],
),

Dynamically built Expandable Page View

If You have multiple pages to display, and You want to build them dynamically while scrolling, use .builder constructor and pass itemCount and itemBuilder parameters:

ExpandablePageView.builder(
  itemCount: 3,
  itemBuilder: (context, index) {
    return ExamplePage(Colors.blue, index.toString(), (index + 1) * 100.0);
  },
),

Loop Mode

To create an infinitely scrolling page view, set loop: true:

ExpandablePageView(
  loop: true,
  children: [
    ExamplePage(Colors.blue, "1", 100),
    ExamplePage(Colors.green, "2", 200),
    ExamplePage(Colors.red, "3", 300),
  ],
),

Programmatic Control in Loop Mode

To programmatically navigate pages in loop mode (e.g., for auto-play carousels or custom indicators), use ExpandablePageController:

final controller = ExpandablePageController(itemCount: 3);

ExpandablePageView(
  controller: controller,
  loop: true,
  children: [
    ExamplePage(Colors.blue, "1", 100),
    ExamplePage(Colors.green, "2", 200),
    ExamplePage(Colors.red, "3", 300),
  ],
),

// Navigate programmatically
controller.jumpToPage(2);
controller.animateToPage(0, duration: Duration(milliseconds: 300), curve: Curves.ease);

// Read current page
print(controller.page);     // e.g., 1.5 (fractional during scroll)
print(controller.realPage); // e.g., 1 (rounded)

Note: ExpandablePageController uses shortest-path navigation — animating from page 0 to the last page will scroll backward (1 step) rather than forward through all pages.

Check out example project to play with ExpandablePageView.