sliding_window_indicator

A lightweight Flutter PageView line indicator with a sliding visible window.

Show a fixed number of lines while the active selection scrolls through a longer page list — ideal for carousels and galleries with many pages.

Demo

Features

Sliding window of lines for large itemCount
Driven by a PageController (smooth mid-scroll interpolation)
Horizontal or vertical orientation
Customizable colors, spacing, size, and border radius
Supports viewportFraction for peek-style PageViews
Zero third-party dependencies beyond Flutter

Install

dependencies:
  sliding_window_indicator: ^0.1.0

import 'package:sliding_window_indicator/sliding_window_indicator.dart';

Usage

final controller = PageController();

Column(
  children: [
    Expanded(
      child: PageView.builder(
        controller: controller,
        itemCount: 12,
        itemBuilder: (context, index) => Center(child: Text('Page $index')),
      ),
    ),
    SlidingWindowIndicator(
      itemCount: 12,
      controller: controller,
      visibleLineCount: 4,
      lineColor: Colors.grey.shade400,
      lineSelectedColor: Colors.black,
    ),
  ],
)

Customization

Parameter	Description
`itemCount`	Total number of pages / lines
`controller`	`PageController` driving selection
`lineColor`	Color of inactive lines
`lineSelectedColor`	Color of the selected line
`lineSpacing`	Gap between consecutive lines
`visibleLineCount`	Max lines shown in the window
`orientation`	`Axis.horizontal` or `Axis.vertical`
`lineWidth`	Length of each line along the main axis
`lineHeight`	Thickness of each line
`lineBorderRadius`	Corner radius for drawn lines
`viewportFraction`	Match `PageController.viewportFraction` when < 1.0

Example

See the example/ app for a PageView carousel with the sliding-window indicator underneath.

License

MIT