Timeline example

Timeline.dart

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(useMaterial3: true),
      home: Scaffold(
        appBar: AppBar(title: const Text("Medication Log")),
        body: ListView(
          padding: const EdgeInsets.all(16),
          children: const [
            Tile(
              title: 'Ozempic Taken',
              time: '8:02 AM',
              icon: Icons.vaccines,
              subtitle: 'Confirmed via Smart Bottle NFC',
            ),
            Tile(
              title: 'Water Intake',
              time: '8:02 AM',
              icon: Icons.local_drink,
              subtitle: 'Confirmed via Smart Bottle NFC Confirmed via Smart Bottle NFC Confirmed via Smart Bottle NFC',
            ),
            Tile(
              title: 'Vitamins',
              subtitle: 'Manually logged',
              time: '8:02 AM',
              icon: Icons.vaccines,
              showVerticalLine: false,
            ),
          ],
        ),
      ),
    );
  }
}

class Tile extends StatelessWidget {
  const Tile({
    super.key,
    required this.title,
    required this.subtitle,
    required this.time,
    required this.icon,
    this.showVerticalLine = true,
  });

  final String title;
  final String subtitle;
  final String time;
  final IconData icon;
  final bool showVerticalLine;

  @override
  Widget build(BuildContext context) {
    final textTheme = Theme.of(context).textTheme;
    
    return IntrinsicHeight(
      child: Row(
        spacing: 8,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Column(
            children: [
               SizedBox.square(
                dimension: 32,
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: Colors.black,
                  ),
                  child: Icon(icon, color: Colors.white, size: 16),
                ),
              ),
              if (showVerticalLine)
                const Expanded(
                  child: Padding(
                    padding: .symmetric(vertical: 4),
                    child: SizedBox(
                      width: 1,
                      child: DecoratedBox(
                        decoration: BoxDecoration(
                          color: Color(0xFFE5E5EA),
                          borderRadius: BorderRadius.all(Radius.circular(8)),
                        ),
                      ),
                    ),
                  ),
                ),
            ],
          ),
          Expanded(
            child: Row(
              crossAxisAlignment: .start,
              children: [
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        title,
                        style: textTheme.labelLarge?.copyWith(
                          fontWeight: FontWeight.w600,
                          fontSize: 14,
                        ),
                      ),
                      Text(
                        subtitle,
                        style: textTheme.labelSmall?.copyWith(
                          fontWeight: FontWeight.w300,
                          fontSize: 12,
                          color: Color(0xFF6C6C70),
                        ),
                        softWrap: true,
                      ),
                      const SizedBox(height: 16),
                    ],
                  ),
                ),
                Text(
                  time,
                  style: textTheme.labelSmall?.copyWith(
                    fontWeight: FontWeight.w300,
                    fontSize: 12,
                    color: Color(0xFF6C6C70),
                  ),
                  softWrap: true,
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}