dynamic_timeline

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

DynamicTimeline은 동적 레이아웃 기능을 갖춘 일일 타임라인, 시간표 및 간트 차트를 시각화하기 위해 설계된 Flutter 위젯입니다. 개발자가 시간 기반 데이터를 상호작용 가능하고 사용자 정의 가능한 방식으로 표현할 수 있도록 하며, 수평 또는 수직 방향을 지원합니다. 다양한 콘텐츠 길이에 맞춰 자동 조정되며 이벤트, 구간 및 레이블의 스타일링도 유연하게 설정할 수 있습니다. 스케줄링 애플리케이션, 프로젝트 관리 도구 또는 시간 순서 시각화가 필요한 모든 앱에 적합합니다.

사용 사례

스케줄링 앱
프로젝트 관리 대시보드
이벤트 기획 인터페이스
시간 기반 데이터 시각화
일일 계획 수립 구현

주요 기능

사용자 지정 가능한 타임라인 레이아웃
수평 및 수직 방향 지원
동적 이벤트 렌더링
확장 가능한 스타일 옵션
다양한 화면 크기에 대응하는 반응형 디자인

적합한 대상

캘린더 기능을 개발하는 개발자
프로젝트 일정을 관리하는 팀
시각적 시간 추적을 필요로 하는 앱
인터랙티브한 시간 표시를 찾는 UI 디자이너
교육용 또는 생산성 애플리케이션

고려 사항

제한된 플랫폼 전용 최적화
복잡한 이벤트 겹침을 수동으로 처리해야 합니다
대규모 데이터 세트에 대한 성능 튜닝이 필요할 수 있습니다
드래그 앤 드롭 상호작용에 대한 내장 지원 없음
동적 업데이트를 위해 외부 상태 관리에 의존합니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

A widget to create daily timelines, timetables, gantt charts* and more.

Note: This package is in early stage and has not been tested with large amount of data.

Daily timeline

Weekly timetable

Gantt chart

Features

Easy to use API.
Rezizable timeline items.
Custom label builder.

Usage

Installation

Add the following line to pubspec.yaml:

dependencies:
  dynamic_timeline: ^0.1.2

Basic set up

Make sure to check out the example for more details.

Dynamic timeline requires you to provide firstDateTime, lastDateTime, labelBuilder and a list of items.

labelBuilder: Used to build the label of each mark, normally a dateFormat will be used.
items: The events of the timeline, who are positioned according to its start and end date times.

Another important property is intervalDuration, that is the lenght of time between each mark.

Example of a daily timeline.

DynamicTimeline(
    firstDateTime: DateTime(1970, 1, 1, 7),
    lastDateTime: DateTime(1970, 1, 1, 22),
    labelBuilder: DateFormat('HH:mm').format,
    intervalDuration: const Duration(hours: 1),
    children: [
      TimelineItem(
        startDateTime: DateTime(1970, 1, 1, 7),
        endDateTime: DateTime(1970, 1, 1, 8),
        child: const Event(title: 'Event 1'),
      ),
      TimelineItem(
        startDateTime: DateTime(1970, 1, 1, 10),
        endDateTime: DateTime(1970, 1, 1, 12),
        child: const Event(title: 'Event 2'),
      ),
      TimelineItem(
        startDateTime: DateTime(1970, 1, 1, 15),
        endDateTime: DateTime(1970, 1, 1, 17),
        child: const Event(title: 'Event 3'),
      ),
    ],
),

패키지, 저장소 및 앱 카테고리 검색

패키지 설치