https://github.com/davies-k/minimap_scrollbar
Minimap Scrollbar is a Flutter widget that creates a miniature, synchronized view (minimap) of a scrollable content area. It allows users to quickly navigate large content by providing a scaled-down overview, along with a movable highlight that indicates the current viewport position like in Visual studio minimap component.
https://github.com/davies-k/minimap_scrollbar
Last synced: 6 months ago
JSON representation
Minimap Scrollbar is a Flutter widget that creates a miniature, synchronized view (minimap) of a scrollable content area. It allows users to quickly navigate large content by providing a scaled-down overview, along with a movable highlight that indicates the current viewport position like in Visual studio minimap component.
- Host: GitHub
- URL: https://github.com/davies-k/minimap_scrollbar
- Owner: Davies-K
- License: mit
- Created: 2024-12-21T20:30:37.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2025-02-14T13:04:15.000Z (8 months ago)
- Last Synced: 2025-03-25T21:21:24.280Z (7 months ago)
- Language: Dart
- Homepage:
- Size: 60.6 MB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
Awesome Lists containing this project
README
# Minimap Scrollbar
**Minimap Scrollbar** is a Flutter widget designed to enhance navigation in scrollable content areas by providing a miniature, synchronized overview of the content, enabling users to locate and jump to sections effortlessly. It allows users to quickly navigate large content by providing a scaled-down overview seamlessly integrated with Flutter's scrolling mechanisms. The movable highlight dynamically reflects the current viewport position, ensuring smooth and accurate navigation. This widget is ideal for applications with large content, such as code editors, document viewers, or data dashboards, enabling users to jump to specific sections via the minimap.
## Examples
|  |  |
|:------------------------------------------------------------------:|:------------------------------------------------------:|
| Mini Code Editor Example | Mini Document Example |
|  |
|:--------------------------------------------------------------------:|
| Mini Masonry Grid Example |
## Features
- **Interactive Minimap**: A real-time, scaled-down view of the child widget that reflects the current scroll position.
- **Viewport Highlight**: A movable highlight on the minimap that indicates the current visible area of the content.
- **Real-time Updates**: The minimap image is updated periodically to reflect the current state of the child widget.
- **Smooth Navigation**: Users can tap or drag on the minimap to quickly scroll and navigate through the content.
## Usage
To use the **Minimap Scrollbar** widget in your Flutter project, follow these steps:
1. Import the package:
```dart
import 'package:minimap_scrollbar/minimap_scrollbar.dart';
```
2. Wrap your scrollable widget with `MinimapScrollbarWidget`:
```dart
MinimapScrollbarWidget(
child: SingleChildScrollView(
child: Column(
children: List.generate(100, (index) => Text('Item $index')),
),
),
);
```
3. Customize the `MinimapScrollbarWidget` as needed:
```dart
MinimapScrollbarWidget(
width: 100,
height: 200,
highlightColor: Colors.blue.withOpacity(0.3),
child: SingleChildScrollView(
child: Column(
children: List.generate(100, (index) => Text('Item $index')),
),
),
);
```
### Properties
- **width**: The width of the minimap.
- **height**: The height of the minimap.
- **highlightColor**: The color of the viewport highlight.
- **updateInterval**: The interval at which the minimap is updated.
- **scrollController**: The scroll controller for the scrollable content.
- **minimapController**: The controller for the minimap.
- **child**: The scrollable widget to be displayed in the minimap.
## Maintainers
- [Davies Kwarteng](https://github.com/davies-k)
## Installation
To use **Minimap Scrollbar** in your Flutter project, add it to your `pubspec.yaml` file:
```yaml
dependencies:
minimap_scrollbar: ^0.1.0