StatusTimeline.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class CheckPoints extends StatelessWidget {
  final int checkedTill;
  final List<String> checkPoints;
  final Color timelineColor;
  final double circleDia;
  final Icon icon;
  final TextStyle labelStyle;

  CheckPoints(
      {@required this.checkedTill,
        @required this.checkPoints,
        this.icon = const Icon(
          Icons.done,
          color: Colors.white,
        ),
        this.timelineColor,
        this.circleDia = 50.0,
        this.labelStyle}) {
    assert(circleDia <= 60);
    assert(checkPoints.length <= 7);
  }

  @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (c, s) {
      // one extra 32 for left and right padding to the check point row


      final double cWidth = ((s.maxWidth - (circleDia/2 * (checkPoints.length-1))) /
          (checkPoints.length - 1));
      // this checkpoint.length - 1 is because we have checkpoint.length - 1, middle sticks
      print("max wi ${s.maxWidth}");
      print("c wi $cWidth");
      var edgeInsetTopOnly = EdgeInsets.only(top: circleDia / 2 );

      Color timelineColor =
          this.timelineColor ?? Theme.of(context).primaryColor;

      TextStyle labelStyle = this.labelStyle ?? Theme.of(context).textTheme.bodyText1;

      return Row(
        mainAxisSize: MainAxisSize.max,
        children: [
          Expanded(
            child: Container(
              height: circleDia,
              // color:Colors.grey,
              child: FittedBox(
                //fit: BoxFit.fill,
                child: Row(
                    mainAxisSize: MainAxisSize.max,
                    children: checkPoints.map((e) {
                      int index = checkPoints.indexOf(e);
                      print(index);
                      print("ffff ${checkPoints.length}");
                      return Container(
                        height: circleDia * 1.2 + 16,
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Column(
                              children: [
                                Container(
                                  width: circleDia,
                                  padding: EdgeInsets.all(4),
                                  child: FittedBox(child: icon),
                                  decoration: BoxDecoration(
                                      shape: BoxShape.circle,
                                      color: index <= checkedTill
                                          ? timelineColor
                                          : timelineColor.withOpacity(0.2)),
                                ),
                                Spacer(),
                                Text(e, style: labelStyle,)
                              ],
                            ),
                           if( index != (checkPoints.length - 1))
                             Container(
                              color: index < checkedTill
                                  ? timelineColor
                                  : timelineColor.withOpacity(0.2),
                              height: 4,
                              margin: edgeInsetTopOnly,
                              width: cWidth,
                            )

                          ],
                        ),
                      );
                    }).toList()),
              ),
            ),
          ),
        ],
      );
    });
  }
}