Flutter 自定义步骤指示

class StepHeaderView extends StatelessWidget {
  final int count; // total step
  final double step; // current step
  final double normalSize = 28;
  final double selectedSize = 38;

  const StepHeaderView({
    Key key,
    this.count,
    this.step,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    List<Widget> children = <Widget>[];
    var normalRadius = normalSize / 2;
    var selectedRadius = selectedSize / 2;
    for (int i = 1; i <= count; i++) {
      if (i != 1) {
        i > ((step - step.toInt()) > 0 ? (step.toInt() + 1) : step)
            ? children.add(SizedBox(
                width: 2,
              ))
            : SizedBox();
        children.add(
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Expanded(
                  child: Container(
                    height: 4,
                    color: i > ((step - step.toInt()) > 0 ? (step.toInt() + 1) : step) ? Colours.gray9 : Colours.appMain,
                  ),
                ),
                i == ((step - step.toInt()) > 0 ? (step.toInt() + 1) : step)
                    ? ClipPath(
                        clipper: _TriangleClipper(),
                        child: Container(
                          width: 10,
                          height: 14,
                          color: i > ((step - step.toInt()) > 0 ? (step.toInt() + 1) : step) ? Colours.gray9 : Colours.appMain,
                        ),
                      )
                    : SizedBox(),
              ],
            ),
          ),
        );
        i >= step
            ? children.add(SizedBox(
                width: 2,
              ))
            : SizedBox();
      }
      children.add(
        Stack(
          alignment: Alignment.center,
          children: [
            _StepCircleView(
              radius: i == step ? selectedRadius : normalRadius,
              color: i > step ? Colours.gray9 : Colours.appMain,
            ),
            Text(
              "$i",
              style: TextStyle(color: Colors.white, fontSize: 16),
            ),
          ],
        ),
      );
    }
    return Container(
      height: 62,
      color: Colors.white,
      child: Padding(
        padding: EdgeInsets.only(left: 53, right: 53),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: children,
        ),
      ),
    );
  }
}

class _TriangleClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path()
      ..lineTo(size.width, size.height / 2)
      ..lineTo(0.0, size.height)
      ..close();
    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
    return true;
  }
}

class _StepCircleView extends StatelessWidget {
  final double radius;
  final Color color;

  const _StepCircleView({
    Key key,
    this.radius,
    this.color,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(radius * 2, radius * 2),
      painter: _StepCirclePainter(radius: radius, color: color),
    );
  }
}

class _StepCirclePainter extends CustomPainter {
  double radius;
  Color color;

  _StepCirclePainter({this.radius = 0, this.color = Colours.appMain});

  @override
  void paint(Canvas canvas, Size size) {
    var paint = Paint()
      ..isAntiAlias = true
      ..style = PaintingStyle.fill
      ..color = color;
    canvas.drawCircle(Offset(radius, radius), radius, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}