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)
Tap a visible line to jump to that page (or handle via onLineTap)
Optional wider/taller active line (activeLineWidth / activeLineHeight)
Horizontal or vertical orientation
Customizable colors, spacing, size, and border radius
Supports viewportFraction for peek-style PageViews
Accessible semantics buttons on tappable lines
Zero third-party dependencies beyond Flutter

Install

dependencies:
  sliding_window_indicator: ^0.2.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,
      // Tap a line to animate to that page (default).
      tapToJump: true,
    ),
  ],
)

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
`activeLineWidth`	Optional wider selected line (defaults to `lineWidth`)
`activeLineHeight`	Optional taller selected line (defaults to `lineHeight`)
`lineBorderRadius`	Corner radius for drawn lines
`viewportFraction`	Match `PageController.viewportFraction` when < 1.0
`tapToJump`	Animate to the tapped page (default `true`)
`onLineTap`	Custom tap handler; when set, replaces `tapToJump`
`jumpDuration`	Duration for `animateToPage`
`jumpCurve`	Curve for `animateToPage`

Example

See the example/ app for a PageView carousel with the sliding-window indicator underneath. Tap the indicator lines to jump pages.

License

MIT