animated_scrollable_timeline 1.0.3

Flutter plugin which provides infinity scrollable timeline widget. It can be useful for implementing real-time streaming components as timeline for playing video.

Animated Scrollable Timeline

A Flutter widget that provides an infinite scrollable timeline with smooth animations. This widget is particularly useful for implementing real-time streaming components, such as video playback timelines or time-based data visualization.

Features

• Two timeline widgets:
  • AnimatedScrollableTimelineWidget: Interactive timeline with scrolling and gesture support
  • AnimatedTimeline: Simple animated timeline without scrolling
• Smooth animations for time progression
• Customizable time divisions and gaps
• Support for both left and right scrolling (in scrollable version)
• Custom date/time formatting
• Time limit constraints (in scrollable version)
• Gesture-based interaction (in scrollable version)
• High-performance rendering with RepaintBoundary

Installation

Add this to your package's pubspec.yaml file:

dependencies:
  animated_scrollable_timeline: any

Usage

AnimatedScrollableTimelineWidget

Here's a basic example of how to use the AnimatedScrollableTimelineWidget:

import 'package:animated_scrollable_timeline/animated_scrollable_timeline.dart';

// Inside your widget tree
AnimatedScrollableTimelineWidget(
  dividerWidth: 1, // Width of the timeline dividers
  divisionGap: 21, // Gap between divisions
  dividersAmount: 10, // Number of dividers to show
  gapDuration: const Duration(seconds: 1), // Time gap between divisions
  scrollRight: true, // Enable scrolling to the right
  scrollLeft: true, // Enable scrolling to the left
  onChosedTime: (DateTime time) {
    // Callback when a time is selected
    print('Selected time: $time');
  },
  dateTimeFormat: (DateTime dateTime) {
    // Custom date/time formatting
    return '${dateTime.hour}:${dateTime.minute}';
  },
  limitDateTime: () {
    // Optional time limit
    return DateTime.now().add(const Duration(hours: 24));
  },
  largeDivisionHeight: 36, // Height of large divisions
  smallDivisionHeight: 12, // Height of small divisions
)

AnimatedTimeline

Here's an example of how to use the simpler AnimatedTimeline:

import 'package:animated_scrollable_timeline/animated_scrollable_timeline.dart';

// Inside your widget tree
AnimatedTimeline(
  dividerWidth: 1, // Width of the timeline dividers
  divisionGap: 21, // Gap between divisions
  dividersAmount: 10, // Number of dividers to show
  gapDuration: const Duration(seconds: 1), // Time gap between divisions
  currentTime: DateTime.now(), // Current time to display
  dateTimeFormat: (DateTime dateTime) {
    // Custom date/time formatting
    return '${dateTime.hour}:${dateTime.minute}';
  },
  largeDivisionHeight: 36, // Height of large divisions
  smallDivisionHeight: 12, // Height of small divisions
)

Properties

AnimatedScrollableTimelineWidget

• dividerWidth: Width of the timeline dividers (default: 1)
• divisionGap: Gap between divisions (default: 21)
• dividersAmount: Number of dividers to show (default: 10)
• gapDuration: Time gap between divisions (default: 1 second)
• scrollRight: Enable scrolling to the right (default: true)
• scrollLeft: Enable scrolling to the left (default: true)
• onChosedTime: Callback function when a time is selected
• dateTimeFormat: Custom function to format the date/time display
• limitDateTime: Optional function to set a time limit
• largeDivisionHeight: Height of large divisions (default: 36)
• smallDivisionHeight: Height of small divisions (default: 12)

AnimatedTimeline

• dividerWidth: Width of the timeline dividers (default: 1)
• divisionGap: Gap between divisions (default: 21)
• dividersAmount: Number of dividers to show (default: 10)
• gapDuration: Time gap between divisions (default: 1 second)
• currentTime: Current time to display in the timeline
• dateTimeFormat: Custom function to format the date/time display
• largeDivisionHeight: Height of large divisions (default: 36)
• smallDivisionHeight: Height of small divisions (default: 12)

Requirements

• Flutter SDK >= 1.17.0
• Dart SDK >= 3.0.0

License

This project is licensed under the MIT License - see the LICENSE file for details.