A reusable horizontal timeline widget for flutter in dart

timeline.dart

import 'package:flutter/material.dart';

class TimelineWidget extends StatelessWidget {
  final List<MilestoneWidget> children;
  const TimelineWidget({
    Key? key,
    required this.children,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisSize: MainAxisSize.min,
      children: children,
    );
  }
}

class MilestoneWidget extends StatelessWidget {
  final Widget? title;
  final String? text;
  final bool isFirst;
  final bool isLast;
  final Color pinColor;
  final Color? progressColor;
  final Color textColor;
  final bool squareBullets;
  const MilestoneWidget({
    Key? key,
    this.text,
    this.isFirst = false,
    this.isLast = false,
    this.pinColor = Colors.white,
    this.progressColor = Colors.white,
    this.textColor = Colors.white,
    this.title,
    this.squareBullets = false,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return IntrinsicHeight(
      child: Row(
        children: [
          Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Flexible(
                child: Container(
                  color: isFirst ? Colors.transparent : progressColor,
                  width: 2,
                ),
              ),
              squareBullets
                  ? Container(
                      height: 7,
                      width: 7,
                      color: pinColor,
                    )
                  : CircleAvatar(backgroundColor: pinColor, radius: 6),
              Flexible(
                child: Container(
                  color: isLast ? Colors.transparent : progressColor,
                  width: 2,
                ),
              ),
            ],
          ),
          const VerticalDivider(color: Colors.transparent),
          Expanded(
            child: Padding(
              padding: const EdgeInsets.symmetric(vertical: 8.0),
              child: title != null
                  ? title!
                  : Text(
                      text!,
                      softWrap: true,
                      maxLines: 3,
                      style: TextStyle(
                        fontSize: 14,
                        color: textColor,
                      ),
                    ),
            ),
          )
        ],
      ),
    );
  }
}