S360fTimeline class

A customizable timeline widget that displays a vertical sequence of events with visual indicators showing completion status.

The S360fTimeline widget creates a bordered container with a light gray background that contains a series of timeline items. Each item displays a title, formatted date/time, and author information with a visual indicator showing whether the item is completed or pending.

Usage

S360fTimeline(
  items: [
    S360fTimelineItem(
      title: 'Task Completed',
      subtitle: 'Additional info',
      author: 'John Doe',
      dateTime: DateTime.now(),
      isCompleted: true,
    ),
    S360fTimelineItem(
      title: 'Pending Task',
      subtitle: 'Waiting for approval',
      author: 'Jane Smith',
      dateTime: DateTime.now().add(Duration(hours: 2)),
      isCompleted: false,
    ),
  ],
)

Visual Design

• Container: Light gray background with rounded corners and border
• Timeline Indicators: Blue circles with checkmarks for completed items, hollow circles for pending items
• Connecting Lines: Vertical blue lines connecting timeline items
• Typography: Clear hierarchy with title, date/time, and author information

Accessibility

The widget uses semantic colors and proper text contrast ratios. Consider adding semantic labels for screen readers when implementing.

Performance

This widget is optimized for lists with moderate number of items (< 100). For larger datasets, consider implementing lazy loading or pagination.