Stepper widget has hardcoded colors

[sergdeus]

It is not possible to change colors of stepper icons and numbers. They are hardcoded instead of using theme colors.

Steps to Reproduce

https://github.com/flutter/flutter/blob/51bcdb9407211ccaf0616533fe1f9eb0e8f04fca/packages/flutter/lib/src/material/stepper.dart#L109

[maheshj01]

Stepper should make use of Theme as per the materials design specs

[awaik]

Any news on this fix?

[black-purple]

I'm facing the same issue here, while using the useMaterial3: true, prop in my app ThemeData.

[csongorkeller]

I've faced the same issue. With an additional problem: I have a detailed theme that contains color and size definitions for the vast majority of the app. What I found out is that ColorScheme.primary and ColorScheme.secondary are driving the color of the stepper steps.

What you technically can do is wrapping your stepper around with a Theme widget and set the above-mentioned colors in the ThemeData.

In my solution, I had to do it a bit more complex to avoid overriding the whole theme of the app this way.

Widget _buildForm() {
    // overriding the current theme to update the color
    ThemeData currentTheme = Theme.of(context);
    ColorScheme colorScheme = currentTheme.colorScheme.copyWith(
      primary: AppColors.greenColor,
    );
    return Theme(
      data: currentTheme.copyWith(colorScheme: colorScheme),
      child: Stepper(
          type: StepperType.vertical,
          currentStep: currentStep,
          connectorThickness: 2,
          controlsBuilder: (BuildContext context, ControlsDetails controls) {
            final isLastStep = currentStep == _buildSteps().length - 1;
            return Container(
                margin: const EdgeInsets.only(top: 25),
                child: Row(children: [
                  Expanded(
                      child: HGButton(
                          isPrimary: true,
                          title: isLastStep ? 'Submit' : 'Next',
                          onTap: () {
                            if (_formKeys[currentStep]
                                .currentState!
                                .validate()) {
                              if (controls.onStepContinue != null) {
                                // calling the onStepContinue function to go to the next step
                                controls
                                    .onStepContinue!(); // Invoke the function if it's not null
                              }
                            }
                          })),
                  const SizedBox(
                    width: 12,
                  ),
                  if (currentStep != 0)
                    Expanded(
                        child: HGButton(
                            isPrimary: false,
                            title: "Back",
                            onTap: controls.onStepCancel!)),
                ]));
          },
          onStepCancel: () {
            setState(() {
              if (currentStep > 0) {
                currentStep -= 1;
              } else {
                // Cancel button pressed on the first step
              }
            });
          },
          onStepContinue: () {
            print("onstep continue was called");
            setState(() {
              if (currentStep < _buildSteps().length - 1) {
                currentStep += 1;
                print(currentStep);
              } else {
                // Finish button pressed
                // You can perform any final actions here
              }
            });
          },
          steps: _buildSteps()),
    );
  }

[biel-correa]

We need a native way of doing this, the color is hard coded and the only place where it can change is when dark mode is active.

Default value

https://github.com/flutter/flutter/blob/51bcdb9407211ccaf0616533fe1f9eb0e8f04fca/packages/flutter/lib/src/material/stepper.dart#L109-L112

Building circle stepp icon

https://github.com/flutter/flutter/blob/51bcdb9407211ccaf0616533fe1f9eb0e8f04fca/packages/flutter/lib/src/material/stepper.dart#L369-L372

[rashidotm]

I was looking for theme settings for stepper and came across this. my problem may propose a solution for you. I was looking for a way to cosolidate theme setting for stepper because each step widget can take a stepStyle parameter. so I thought there is a standard theme settings for stepper and came across this post.

anyways, my proposal to you till this get complete is to use stepStyle inside your Step widget. yes, it will be repetitive but it gets the job done.

example 👇

  stepStyle: StepStyle(
    border: Border.all(
      color: Theme.of(context).colorScheme.onSurface,
      width: 2,
    ),
    color: Theme.of(context).colorScheme.surface,
    connectorColor: Theme.of(context).colorScheme.surface,
    connectorThickness: 4,
    errorColor: Theme.of(context).colorScheme.error,
    gradient: LinearGradient(
      colors: [
        Theme.of(context).colorScheme.primary,
        Theme.of(context).colorScheme.secondary,
      ],
    ),
    indexStyle: Theme.of(context).textTheme.headlineLarge,
  ),