Adds a floating, navigable outline panel to long Flutter pages. It lets users jump to sections, highlights the current section while scrolling, and supports nested, collapsible entries.

Features

• Smooth scrolling to section widgets.
• Active-section tracking for scrollable content.
• Nested outline items with collapsible sections.
• Tap, hover, or combined trigger behavior.
• Customizable placement, animation, panel, and item styling.

Installation

Add the package to your app's pubspec.yaml:

dependencies:
  scrollable_positioned_list_index: ^0.1.0

Then run:

flutter pub get

Usage

Create a GlobalKey for each section, use those keys in OutlineItems, and wrap the scrollable content with ScrollableOutlineIndex.

import 'package:flutter/material.dart';
import 'package:scrollable_positioned_list_index/scrollable_positioned_list_index.dart';

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

  @override
  State<ArticlePage> createState() => _ArticlePageState();
}

class _ArticlePageState extends State<ArticlePage> {
  final _scrollController = ScrollController();
  final _introductionKey = GlobalKey();
  final _detailsKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return ScrollableOutlineIndex(
      scrollController: _scrollController,
      items: [
        OutlineItem(
          id: 'introduction',
          title: 'Introduction',
          widgetKey: _introductionKey,
        ),
        OutlineItem(
          id: 'details',
          title: 'Details',
          widgetKey: _detailsKey,
        ),
      ],
      child: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          children: [
            Container(key: _introductionKey, height: 500),
            Container(key: _detailsKey, height: 500),
          ],
        ),
      ),
    );
  }

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

Main API

• ScrollableOutlineIndex overlays a trigger button and outline panel on a scrollable child.
• OutlineItem describes a section. Use children and level for nested entries.
• OutlineController lets an app expand or collapse the panel, manage collapsed sections, and scroll to an item.
• OutlinePosition chooses the left or right edge, and OutlineTriggerMode chooses tap, hover, or both.

See the example app for a complete demonstration.

Issues and contributions

Report issues or contribute at the GitHub repository.