Issues with size

[CanadianN1nj4]

Since sizing is forced on customStep instead of wrapping content this causes a number of overflow problems.

This is when using forced sizing:

When removing size this is caused:

I would suggest allowing wrapping. Because even when size is not set and I try to set the height and width on the container I return in customStep, nothing changes.

Code to reproduce:

var steps = ["concern", "photograph", "ai result", "another"];
var currentStep = 1;
Container(
            padding: const EdgeInsets.symmetric(
              horizontal: PaddingSize.medium,
              // vertical: PaddingSize.medium,
            ),
            // color: appBarColor,
            child: StepProgressIndicator(
              // size: 25,
              totalSteps: steps.length,
              currentStep: currentStep,
              selectedColor: Colors.yellow,
              unselectedColor: Colors.grey,
              customStep: (index, color, __) => Container(
                color: color,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Text(
                      "${index + 1}. ${steps[index].toUpperCase()}",
                      textAlign: TextAlign.center,
                      style: const TextStyle(
                        fontSize: 10,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

[CanadianN1nj4]

I've found a sort of work around in the mean time. Using a fitted box for scaling down the font. Though IMO not the best solution.

FittedBox(
    fit: BoxFit.scaleDown,
    child: Text(
        "${index + 1}. ${steps[index].toUpperCase()}",
        textAlign: TextAlign.center,
        style: const TextStyle(
            fontSize: 10,
        ),),),