https://github.com/odd-io/flutter_occurrence_time_range_selector
Flutter widget that lets the user "select" a time range while displaying an events occurrence chart.
https://github.com/odd-io/flutter_occurrence_time_range_selector
flutter time-range time-series
Last synced: 29 days ago
JSON representation
Flutter widget that lets the user "select" a time range while displaying an events occurrence chart.
- Host: GitHub
- URL: https://github.com/odd-io/flutter_occurrence_time_range_selector
- Owner: odd-io
- License: mit
- Created: 2024-07-18T11:55:22.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2026-03-24T09:34:56.000Z (2 months ago)
- Last Synced: 2026-03-25T11:55:48.816Z (2 months ago)
- Topics: flutter, time-range, time-series
- Language: Dart
- Homepage: https://pub.dev/packages/flutter_occurrence_time_range_selector
- Size: 311 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# 📊 Occurrence Time Range Selector
A highly interactive and customizable Flutter widget that allows users to select a time range while visualizing event occurrences on a dynamic chart.
## ✨ Features
- 🔍 Zoom and pan functionality for detailed exploration
- 📅 Dynamic time scale adapting to the selected range
- 📊 Stacked vertical bars for multiple event classes
- 🎨 Customizable colors and styles
- ⏱️ Millisecond precision for high-detail views
- 🖱️ Optimized for desktop use with mouse and keyboard
## 🚀 Getting Started
### Usage
Import the package in your Dart code:
```dart
import 'package:occurrence_time_range_selector/occurrence_time_range_selector.dart';
```
Then, you can use the `TimeRangeSelector` widget in your Flutter app:
```dart
final now = DateTime.now();
TimeRangeSelector(
startDate: now.subtract(Duration(days: 30)),
endDate: now.add(Duration(days: 30)),
events: [
TimeEvent(tag: 'Class A', dateTime: now.subtract(Duration(days: 15))),
TimeEvent(tag: 'Class B', dateTime: now.subtract(Duration(days: 7))),
TimeEvent(tag: 'Class A', dateTime: now),
TimeEvent(tag: 'Class C', dateTime: now.add(Duration(days: 10))),
TimeEvent(tag: 'Class B', dateTime: now.add(Duration(days: 20))),
],
tagStyles: const {
'Class A': TagStyle(color: Colors.blue),
'Class B': TagStyle(color: Colors.red),
'Class C': TagStyle(color: Colors.green),
},
onRangeChanged: (DateTime newStart, DateTime newEnd) {
print('New range: $newStart to $newEnd');
},
style: const TimelineStyle(
axisColor: Colors.black,
axisLabelStyle: TextStyle(fontSize: 18, color: Colors.black),
barSpacing: 2,
backgroundColor: Colors.white,
),
)
```
## 🛠️ Customization
The `TimeRangeSelector` widget offers various customization options:
- `tagStyles`: Define colors for different event classes
- `style`: Customize the appearance of the timeline
- `minZoomFactor` and `maxZoomFactor`: Set limits for zooming capabilities
## 📄 License
This project is licensed under the MIT License - see the [LICENSE](/LICENSE) file for details.
---
Made with ❤️ by [odd.io](https://odd.io/)