Stepper 4

import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:separated_row/separated_row.dart';

int activeIndex = 0;
final list = [
  {
    'title': 'Form',
  },
  {
    'title': 'Attachment',
  },
  {
    'title': 'Submit',
  }
];

SeparatedRow(
  separatorBuilder: (context, index) {
    final colorState =
        activeIndex >= index ? Colors.deepPurple : Colors.black45;
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 6),
      child: Icon(
        Icons.double_arrow_rounded,
        color: colorState,
        size: 18,
      ),
    );
  },
  children: List.generate(list.length, (index) {
    final title = list[index]['title'].toString();
    final colorState =
        activeIndex >= index ? Colors.deepPurple : Colors.black45;
    return GestureDetector(
      onTap: () {
        activeIndex = index;
        setState(() {});
      },
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            width: 16,
            height: 16,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(
                color: colorState,
                width: activeIndex >= index ? 1.5 : 1,
              ),
            ),
            alignment: Alignment.center,
            child: Text(
              '${index + 1}',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 10,
                color: colorState,
                height: 1,
              ),
            ),
          ),
          const Gap(4),
          Text(
            title,
            style: TextStyle(
              fontWeight: activeIndex >= index
                  ? FontWeight.w500
                  : FontWeight.w400,
              fontSize: 14,
              color: colorState,
            ),
          ),
        ],
      ),
    );
  }),
),