timebar_widget

A highly customizable timeline component for Flutter, designed for video surveillance, live streaming playback, and historical record navigation. Supports scaling, multiple record types, real-time interaction, and complete UI customization.

中文说明 (Chinese)

Features

🚀 Smooth Interaction: Fluid scrolling to change time, pinch-to-zoom for adjusting time precision.
🎨 Deeply Customizable: Customize background colors, scale line colors, text styles, indicators, and more.
📊 Multiple Record Segments: Display different record types (Normal, Motion, Alert, Custom) with distinct colors.
⚖️ Flexible Scaling: Configure maximum and minimum zoom levels to suit different time spans.
📱 Responsive Design: Adapts to screen orientation changes with configurable heights for landscape and portrait modes.

Preview

Screenshot

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  timebar_widget: ^0.0.2

Then run:

flutter pub get

Quick Start

Here is a simple example of how to use TimeBarWidget:

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

class SimpleTimeBarExample extends StatefulWidget {
  @override
  _SimpleTimeBarExampleState createState() => _SimpleTimeBarExampleState();
}

class _SimpleTimeBarExampleState extends State<SimpleTimeBarExample> {
  int _currentTimeMs = DateTime.now().millisecondsSinceEpoch;

  @override
  Widget build(BuildContext context) {
    return TimeBarWidget(
      // Current selected timestamp in milliseconds
      currentTimeMs: _currentTimeMs,
      // List of record segments
      segments: [
        RecordSegment(
          startTimeMs: _currentTimeMs - 3600000,
          endTimeMs: _currentTimeMs + 3600000,
          type: SegmentType.normal,
        ),
      ],
      // Callback when time changes
      onTimeChanged: (timeMs) {
        setState(() {
          _currentTimeMs = timeMs;
        });
      },
    );
  }
}

Core Components

RecordSegment

Defines a record area on the timeline:

startTimeMs: Start time of the record.
endTimeMs: End time of the record.
type: Type of the segment (normal, motion, alert, custom).

Customization Options

You can deeply customize the appearance using the following configuration objects:

TimeBarOption: Controls overall height and background color.
VideoAreaOption: Controls the height and vertical position of the record bars.
MiddleIndicatorOption: Controls the style of the center indicator (cursor) and time text.
TimeScaleOption: Controls the appearance of scale lines and time labels.

Full Example

Check out example/time_bar_demo.dart for a complete implementation including playback simulation, zoom controls, and theme switching.

License

MIT License