Deepyr Documentation

Timeline with text on both sides and icon

Preview

1984
check_circle
First Macintosh computer
1998
check_circle
iMac
2001
check_circle
iPod
2007
check_circle
iPhone
2015
check_circle
Apple Watch

Dart

Timeline([
  TimelineItem(
    start: TimelineStart([text('1984')]),
    middle: TimelineMiddle([Icon('check_circle')]),
    end: TimelineEnd([text('First Macintosh computer')], style: [TimelineEnd.box]),
  ),
  TimelineItem(
    start: TimelineStart([text('1998')]),
    middle: TimelineMiddle([Icon('check_circle')]),
    end: TimelineEnd([text('iMac')], style: [TimelineEnd.box]),
  ),
  // ... more items
])

Timeline with bottom side only

Preview

check_circle
First Macintosh computer
check_circle
iMac
check_circle
iPod
check_circle
iPhone
check_circle
Apple Watch

Dart

Timeline([
  TimelineItem(
    middle: TimelineMiddle([Icon('check_circle')]),
    end: TimelineEnd([text('First Macintosh computer')], style: [TimelineEnd.box]),
  ),
  // ... more items with only middle and end
])

Timeline with top side only

Preview

First Macintosh computer
check_circle
iMac
check_circle
iPod
check_circle
iPhone
check_circle
Apple Watch
check_circle

Dart

Timeline([
  TimelineItem(
    start: TimelineStart([text('First Macintosh computer')], style: [TimelineStart.box]),
    middle: TimelineMiddle([Icon('check_circle')]),
  ),
  // ... more items with only start and middle
])

Timeline with different sides

Preview

First Macintosh computer
check_circle
check_circle
iMac
iPod
check_circle
check_circle
iPhone
Apple Watch
check_circle

Dart

Timeline([
  TimelineItem(
    start: TimelineStart([text('First Macintosh computer')], style: [TimelineStart.box]),
    middle: TimelineMiddle([Icon('check_circle')]),
  ),
  TimelineItem(
    middle: TimelineMiddle([Icon('check_circle')]),
    end: TimelineEnd([text('iMac')], style: [TimelineEnd.box]),
  ),
  // ... alternating items
])

Timeline with colorful lines

Preview

First Macintosh computer
check_circle
check_circle
iMac
iPod
check_circle
check_circle
iPhone
Apple Watch
check_circle

Dart

Timeline([
  TimelineItem(
    startConnectorStyle: [BgUtil.primary],
    endConnectorStyle: [BgUtil.primary],
    start: TimelineStart([text('First Macintosh...')], style: [TimelineStart.box]),
    middle: TimelineMiddle([Icon('check_circle', style: [TextUtil.primary])]),
  ),
  // ... more items
])

Timeline without icons

Preview

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

Dart

Timeline([
  TimelineItem(start: TimelineStart([text('First Macintosh computer')], style: [TimelineStart.box])),
  TimelineItem(end: TimelineEnd([text('iMac')], style: [TimelineEnd.box])),
  // ... more items without `middle`
])

Vertical timeline

Preview

1984
check_circle
First Macintosh computer
1998
check_circle
iMac
2001
check_circle
iPod
2007
check_circle
iPhone
2015
check_circle
Apple Watch

Dart

Timeline(
  style: [Timeline.vertical],
  [
    TimelineItem(
      start: TimelineStart([text('1984')]),
      middle: TimelineMiddle([Icon('check_circle')]),
      end: TimelineEnd([text('First Macintosh computer')], style: [TimelineEnd.box]),
    ),
    // ... more items
  ],
)

Vertical timeline with right side only

Preview

check_circle
First Macintosh computer
check_circle
iMac
check_circle
iPod
check_circle
iPhone
check_circle
Apple Watch

Dart

Timeline(
  style: [Timeline.vertical],
  [
    TimelineItem(
      middle: TimelineMiddle([Icon('check_circle')]),
      end: TimelineEnd([text('First Macintosh computer')], style: [TimelineEnd.box]),
    ),
    // ... more items
  ],
)

Vertical timeline with left side only

Preview

First Macintosh computer
check_circle
iMac
check_circle
iPod
check_circle
iPhone
check_circle
Apple Watch
check_circle

Dart

Timeline(
  style: [Timeline.vertical],
  [
    TimelineItem(
      start: TimelineStart([text('First Macintosh computer')], style: [TimelineStart.box]),
      middle: TimelineMiddle([Icon('check_circle')]),
    ),
    // ... more items
  ],
)

Vertical timeline with different sides

Preview

First Macintosh computer
check_circle
check_circle
iMac
iPod
check_circle
check_circle
iPhone
Apple Watch
check_circle

Dart

Timeline(
  style: [Timeline.vertical],
  [
    TimelineItem(
      start: TimelineStart([text('First Macintosh computer')], style: [TimelineStart.box]),
      middle: TimelineMiddle([Icon('check_circle')]),
    ),
    TimelineItem(
      middle: TimelineMiddle([Icon('check_circle')]),
      end: TimelineEnd([text('iMac')], style: [TimelineEnd.box]),
    ),
    // ... alternating items
  ],
)

Vertical timeline with colorful lines

Preview

First Macintosh computer
check_circle
check_circle
iMac
iPod
check_circle
check_circle
iPhone
Apple Watch
check_circle

Dart

Timeline(
  style: [Timeline.vertical],
  [
    TimelineItem(
      startConnectorStyle: [BgUtil.primary],
      endConnectorStyle: [BgUtil.primary],
      start: TimelineStart([text('First Macintosh...')], style: [TimelineStart.box]),
      middle: TimelineMiddle([Icon('check_circle', style: [TextUtil.primary])]),
    ),
    // ... more items
  ],
)

Vertical timeline without icons

Preview

First Macintosh computer
iMac
iPod
iPhone
Apple Watch

Dart

Timeline(
  style: [Timeline.vertical],
  [
    TimelineItem(start: TimelineStart([text('First Macintosh computer')], style: [TimelineStart.box])),
    TimelineItem(end: TimelineEnd([text('iMac')], style: [TimelineEnd.box])),
    // ... more items without `middle`
  ],
)

Responsive: vertical on small screens, horizontal on large screens

Preview

1984
check_circle
First Macintosh computer
1998
check_circle
iMac
2001
check_circle
iPod

Dart

Timeline(
  style: [
    Timeline.vertical, // Default for mobile
    Timeline.horizontal.at(Breakpoint.lg), // Horizontal on large screens
  ],
  [ /* ... TimelineItems ... */ ],
)

Timeline with icon snapped to the start

Preview

1984
First Macintosh computer
The Apple Macintosh—later rebranded as the Macintosh 128K—is the original Apple Macintosh personal computer. It played a pivotal role in establishing desktop publishing as a general office function. The motherboard, a 9 in (23 cm) CRT monitor, and a floppy drive were housed in a beige case with integrated carrying handle; it came with a keyboard and single-button mouse.
check_circle
check_circle
1998
iMac
iMac is a family of all-in-one Mac desktop computers designed and built by Apple Inc. It has been the primary part of Apple's consumer desktop offerings since its debut in August 1998, and has evolved through seven distinct forms
2001
iPod
The iPod is a discontinued series of portable media players and multi-purpose mobile devices designed and marketed by Apple Inc. The first version was released on October 23, 2001, about 8+1⁄2 months after the Macintosh version of iTunes was released. Apple sold an estimated 450 million iPod products as of 2022. Apple discontinued the iPod product line on May 10, 2022. At over 20 years, the iPod brand is the oldest to be discontinued by Apple
check_circle
check_circle
2007
iPhone
iPhone is a line of smartphones produced by Apple Inc. that use Apple's own iOS mobile operating system. The first-generation iPhone was announced by then-Apple CEO Steve Jobs on January 9, 2007. Since then, Apple has annually released new iPhone models and iOS updates. As of November 1, 2018, more than 2.2 billion iPhones had been sold. As of 2022, the iPhone accounts for 15.6% of global smartphone market share
2015
Apple Watch
The Apple Watch is a line of smartwatches produced by Apple Inc. It incorporates fitness tracking, health-oriented capabilities, and wireless telecommunication, and integrates with iOS and other Apple products and services
check_circle

Dart

Timeline(
  style: [
    Timeline.snapIcon,
    Timeline.vertical,
    Timeline.compact.below(Breakpoint.md), // Compact on small screens
  ],
  [
    TimelineItem(
      middle: TimelineMiddle([Icon('check_circle')]),
      start: TimelineStart(
        style: [
          TextUtil.end.at(Breakpoint.md), // Text aligns end on medium screens
          Spacing.mb(10),
        ],
        [
          Component.element(tag: 'time', children: [text('1984')], classes: 'font-mono italic'),
          div([text('First Macintosh computer')], classes: 'text-lg font-black'),
          text('...long description...'),
        ],
      ),
    ),
    // ... more alternating items
  ],
)