page_scroller

A Flutter widget package that provides customizable scrolling functionality designed specifically for page-based widgets like PageView.

  • Horizontal and vertical scroll bars that can be optionally synced with PageViewController
  • Customizable bar colors, sizes, border radius, etc.
  • Support for custom bar widgets
  • Smooth animation with adjustable duration
  • Interactive scroll bar that responds to touch/drag
  • Works with existing PageController instances

Getting started

Add the package to your pubspec.yaml:

dependencies:
  page_scroller: ^0.0.1

Usage

Here's a basic example using both horizontal and vertical scrollers:

Stack(
  children: [
    PageView.builder(
      itemCount: 5,
      controller: pageController,
      itemBuilder: (context, index) => Center(
        child: Text('Page $index'),
      ),
    ),
    VerticalPageScroller(
      numOfItems: 5,
      width: 20,
      widgetHeight: MediaQuery.of(context).size.height,
      pageController: pageController,
    ),
    Positioned(
      bottom: 30,
      right: 0,
      child: HorizontalPageScroller(
        height: 30,
        widgetWidth: MediaQuery.of(context).size.width - 100,
        numOfItems: 5,
        pageController: pageController,
      ),
    ),
  ],
)

Customization

Both scrollers support various customization options:

HorizontalPageScroller(
  height: 30,
  widgetWidth: 300,
  numOfItems: 5,
  defaultBarColor: Colors.grey,
  selectedBarColor: Colors.white,
  backgroundRailColor: Colors.black54,
  backgroundRailBorderRadius: 5,
  barBorderRadius: 5,
  initialSelectedItemIndex: 0,
  barChild: YourCustomWidget(), // Optional custom bar widget
  minBarWidth: 30,
  barChildPadding: EdgeInsets.all(4),
  scrollerMoveDuration: Duration(milliseconds: 100),
  onTap: (index) => print('Tapped index: $index'),
  onParentPageChanged: () => print('Page changed'),
  pageController: pageController,
)

Additional information

Libraries

page_scroller