Parcel tracking timeline

import 'package:flutter/material.dart';

class TrackEvent {
  const TrackEvent(this.title, {this.detail, this.at});
  final String title;
  final String? detail;
  final DateTime? at; // null means it has not happened yet
}

class TrackingTimeline extends StatelessWidget {
  const TrackingTimeline({super.key, required this.events});
  final List<TrackEvent> events; // in delivery order

  @override
  Widget build(BuildContext context) {
    // The current step is the last event that already has a timestamp.
    final current = events.lastIndexWhere((e) => e.at != null);
    return Column(children: [
      for (var i = 0; i < events.length; i++)
        _Row(
          event: events[i],
          isFirst: i == 0,
          isLast: i == events.length - 1,
          state: i < current ? _S.done : (i == current ? _S.current : _S.pending),
        ),
    ]);
  }
}

enum _S { done, current, pending }

class _Row extends StatelessWidget {
  const _Row({required this.event, required this.isFirst, required this.isLast, required this.state});
  final TrackEvent event;
  final bool isFirst, isLast;
  final _S state;

  @override
  Widget build(BuildContext context) {
    final scheme = Theme.of(context).colorScheme;
    final active = state != _S.pending;
    final line = active ? scheme.primary : scheme.outlineVariant;
    final loc = MaterialLocalizations.of(context);
    return IntrinsicHeight(
      child: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
        SizedBox(
          width: 32,
          child: Column(children: [
            Expanded(child: Container(width: 2, color: isFirst ? Colors.transparent : line)),
            Container(
              width: state == _S.current ? 18 : 12,
              height: state == _S.current ? 18 : 12,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: state == _S.pending ? scheme.surface : scheme.primary,
                border: Border.all(color: line, width: 2),
              ),
              child: state == _S.done ? Icon(Icons.check, size: 8, color: scheme.onPrimary) : null,
            ),
            Expanded(child: Container(width: 2, color: isLast ? Colors.transparent : (state == _S.done ? scheme.primary : scheme.outlineVariant))),
          ]),
        ),
        Expanded(
          child: Padding(
            padding: const EdgeInsets.symmetric(vertical: 10),
            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
              Text(event.title, style: TextStyle(fontWeight: state == _S.current ? FontWeight.bold : FontWeight.normal,
                  color: state == _S.pending ? scheme.outline : null)),
              if (event.detail != null) Text(event.detail!, style: Theme.of(context).textTheme.bodySmall),
              if (event.at != null)
                Text('${loc.formatMediumDate(event.at!)}, ${loc.formatTimeOfDay(TimeOfDay.fromDateTime(event.at!))}',
                    style: Theme.of(context).textTheme.labelSmall),
            ]),
          ),
        ),
      ]),
    );
  }
}