Skip to content
HyperUI for Flutter
HyperUI for Flutter requires the Style package — this site itself ships no pub package.

Timelines

Ported from HyperUI’s Timelines — see Attribution.

Vertical

Section titled “Vertical”

Includes a dark: variant — toggle the site theme (top right) to preview it.

const _body =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis '
    'tempora ipsum adipisci tenetur sunt quae exercitationem sed pariatur '
    'porro!';


class Timelines1Example extends StatelessWidget {
  const Timelines1Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-xl p-6',
      child: Style(
        'relative space-y-8 before:absolute before:-ms-px before:h-full before:w-0.5 before:rounded-full before:bg-gray-200 dark:before:bg-gray-700',
        children: const [
          Style(
            'relative -ms-1.5 flex items-start gap-4',
            children: [
              Style('size-3 shrink-0 rounded-full bg-blue-600'),
              Style(
                '-mt-2',
                children: [
                  Style(
                    'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                    display: DisplayType.inline,
                    child: Text('12/02/2025'),
                  ),
                  Style(
                    'text-lg font-bold text-gray-900 dark:text-white',
                    child: Text('Kickoff'),
                  ),
                  Style(
                    'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                    child: Text(_body),
                  ),
                ],
              ),
            ],
          ),
          Style(
            'relative -ms-1.5 flex items-start gap-4',
            children: [
              Style('size-3 shrink-0 rounded-full bg-blue-600'),
              Style(
                '-mt-2',
                children: [
                  Style(
                    'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                    display: DisplayType.inline,
                    child: Text('15/03/2025'),
                  ),
                  Style(
                    'text-lg font-bold text-gray-900 dark:text-white',
                    child: Text('First Milestone'),
                  ),
                  Style(
                    'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                    child: Text(_body),
                  ),
                ],
              ),
            ],
          ),
          Style(
            'relative -ms-1.5 flex items-start gap-4',
            children: [
              Style('size-3 shrink-0 rounded-full bg-blue-600'),
              Style(
                '-mt-2',
                children: [
                  Style(
                    'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                    display: DisplayType.inline,
                    child: Text('24/04/2025'),
                  ),
                  Style(
                    'text-lg font-bold text-gray-900 dark:text-white',
                    child: Text('Launch'),
                  ),
                  Style(
                    'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                    child: Text(_body),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Vertical with middle line

Section titled “Vertical with middle line”

Includes a dark: variant — toggle the site theme (top right) to preview it.

const _body =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis '
    'tempora ipsum adipisci tenetur sunt quae exercitationem sed pariatur '
    'porro!';


class Timelines2Example extends StatelessWidget {
  const Timelines2Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-xl p-6',
      child: Style(
        'relative space-y-8 before:absolute before:top-0 before:left-1/2 before:h-full before:w-0.5 before:-translate-x-1/2 before:rounded-full before:bg-gray-200 dark:before:bg-gray-700',
        children: [
          Style(
            'group relative grid grid-cols-2 odd:-me-3 even:-ms-3',
            children: [
              Style(
                'relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last',
                children: const [
                  Style('size-3 shrink-0 rounded-full bg-blue-600'),
                  Style(
                    '-mt-2',
                    children: [
                      Style(
                        'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                        display: DisplayType.inline,
                        child: Text('12/02/2025'),
                      ),
                      Style(
                        'text-lg font-bold text-gray-900 dark:text-white',
                        child: Text('Kickoff'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text(_body),
                      ),
                    ],
                  ),
                ],
              ),
              const SizedBox.shrink(),
            ],
          ),
          Style(
            'group relative grid grid-cols-2 odd:-me-3 even:-ms-3',
            children: [
              Style(
                'relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last',
                children: const [
                  Style('size-3 shrink-0 rounded-full bg-blue-600'),
                  Style(
                    '-mt-2',
                    children: [
                      Style(
                        'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                        display: DisplayType.inline,
                        child: Text('5/03/2025'),
                      ),
                      Style(
                        'text-lg font-bold text-gray-900 dark:text-white',
                        child: Text('First Milestone'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text(_body),
                      ),
                    ],
                  ),
                ],
              ),
              const SizedBox.shrink(),
            ],
          ),
          Style(
            'group relative grid grid-cols-2 odd:-me-3 even:-ms-3',
            children: [
              Style(
                'relative flex items-start gap-4 group-odd:flex-row-reverse group-odd:text-right group-even:order-last',
                children: const [
                  Style('size-3 shrink-0 rounded-full bg-blue-600'),
                  Style(
                    '-mt-2',
                    children: [
                      Style(
                        'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                        display: DisplayType.inline,
                        child: Text('24/04/2025'),
                      ),
                      Style(
                        'text-lg font-bold text-gray-900 dark:text-white',
                        child: Text('Launch'),
                      ),
                      Style(
                        'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                        child: Text(_body),
                      ),
                    ],
                  ),
                ],
              ),
              const SizedBox.shrink(),
            ],
          ),
        ],
      ),
    );
  }
}

Horizontal

Section titled “Horizontal”

Includes a dark: variant — toggle the site theme (top right) to preview it.

const _body =
    'Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga officiis '
    'tempora ipsum adipisci tenetur sunt quae exercitationem sed pariatur '
    'porro!';


class Timelines3Example extends StatelessWidget {
  const Timelines3Example({super.key});


  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-5xl p-6',
      child: Style(
        'relative flex gap-8 before:absolute before:-mt-px before:h-0.5 before:w-full before:rounded-full before:bg-gray-200 dark:before:bg-gray-700',
        children: const [
          Style(
            'relative -mt-1.5',
            children: [
              Style('block size-3 rounded-full bg-blue-600'),
              Style(
                'mt-4',
                children: [
                  Style(
                    'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                    display: DisplayType.inline,
                    child: Text('12/02/2025'),
                  ),
                  Style(
                    'text-lg font-bold text-gray-900 dark:text-white',
                    child: Text('Kickoff'),
                  ),
                  Style(
                    'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                    child: Text(_body),
                  ),
                ],
              ),
            ],
          ),
          Style(
            'relative -mt-1.5',
            children: [
              Style('block size-3 rounded-full bg-blue-600'),
              Style(
                'mt-4',
                children: [
                  Style(
                    'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                    display: DisplayType.inline,
                    child: Text('15/03/2025'),
                  ),
                  Style(
                    'text-lg font-bold text-gray-900 dark:text-white',
                    child: Text('First Milestone'),
                  ),
                  Style(
                    'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                    child: Text(_body),
                  ),
                ],
              ),
            ],
          ),
          Style(
            'relative -mt-1.5',
            children: [
              Style('block size-3 rounded-full bg-blue-600'),
              Style(
                'mt-4',
                children: [
                  Style(
                    'text-xs/none font-medium text-gray-700 dark:text-gray-200',
                    display: DisplayType.inline,
                    child: Text('24/04/2025'),
                  ),
                  Style(
                    'text-lg font-bold text-gray-900 dark:text-white',
                    child: Text('Launch'),
                  ),
                  Style(
                    'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                    child: Text(_body),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}