Simple Timeline example

readme.md

Created with <3 with dartpad.dev.

main.dart

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class TimelineWidget extends StatelessWidget {
  final List<String> events;

  const TimelineWidget({required this.events});

  @override
  Widget build(BuildContext context) {
    int wi = events.length - 1;
    return ListView.builder(
      itemCount: events.length,
      itemBuilder: (context, index) {
        return TimelineBubble(
          event: events[index],
          ultimo: index == wi,
        );
      },
    );
  }
}

class TimelineBubble extends StatelessWidget {
  final String event;
  final bool ultimo;

  const TimelineBubble({required this.event, this.ultimo = false});

  @override
  Widget build(BuildContext context) {
//     return Container(
//       padding: const EdgeInsets.symmetric(vertical: 10.0),
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
//           Text(event),
        SizedBox(
          width: 50.0,
          child: Column(
            children: [
              Container(
                width: 25.0,
                height: 25.0,
                decoration: const BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.green,
                ),
//                 child: const Icon(Icons.done),
              ),
              ultimo
                  ? const SizedBox()
                  : Container(
                      width: 2.0,
                      height: 20,
                      color: Colors.white,
                    ),
//                 Expanded(
//                   child: Container(
//                     width: 2.0,
//                     color: Colors.blue,
//                   ),
//                 ),
            ],
          ),
        ),
        const SizedBox(width: 10.0),
        Container(
          padding: const EdgeInsets.only(top: 5),
          child: Text(event),
        ),
//         Text(event),
//         Expanded(
//           child: Text(event),
//         ),
      ],
    );
//     );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Timeline Widget'),
        ),
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const TimelineWidget(
      events: [
        'Event 1',
        'Event 2',
        'Event 3',
        'Event 4',
        'Event 5',
      ],
    );
//     return Text(
//       'Hello, World!',
//       style: Theme.of(context).textTheme.headlineMedium,
//     );
  }
}