flutter_occurrence_time_range_selector 0.0.3 copy "flutter_occurrence_time_range_selector: ^0.0.3" to clipboard
flutter_occurrence_time_range_selector: ^0.0.3 copied to clipboard

A highly interactive and customizable Flutter widget that allows users to select a time range while visualizing event occurrences on a dynamic chart.

📊 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.

example_screenshot

✨ 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:

import 'package:occurrence_time_range_selector/occurrence_time_range_selector.dart';

Then, you can use the TimeRangeSelector widget in your Flutter app:

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 file for details.


Made with ❤️ by odd.io

1
likes
150
points
48
downloads

Publisher

verified publisherlukas-poque.dev

Weekly Downloads

A highly interactive and customizable Flutter widget that allows users to select a time range while visualizing event occurrences on a dynamic chart.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

equatable, flutter, intl

More

Packages that depend on flutter_occurrence_time_range_selector