Flutter - Change Stepper - Step Color

Question

Is there a way to change the color of the Steps without creating a custom Stepper? the current step is blue.

https://docs.flutter.io/flutter/material/Stepper-class.html
https://docs.flutter.io/flutter/material/Step-class.html

Forego

see github.com/flutter/flutter/blob/master/packages/flutter/lib/src/… – Kirstenkirsteni

Thank you , so its using the primaryColor of the material app theme. :) – Forego

Submitted a bug here github.com/flutter/flutter/issues/57364 the other buttons are using accentColor as button background... – Grettagreuze

Answer 1

Wrap your stepper in a Theme Widget.

body: Theme(
    data: ThemeData(
                  accentColor: Colors.orange,
                  primarySwatch: Colors.orange,
                  colorScheme: ColorScheme.light(
                    primary: Colors.orange
                  )
                ),
    child: Stepper(
       steps: []
    ))

It will change the index color of the stepper as well as the CONTINUE button color to orange(Set the color as per your own requirement).

Loella

Answer 2

In April 2022 these properties work

1. Light theme - primary - the active state, primary.withOpacity(0.38) will be used for the disabled state.

2. Dark theme - secondary - the active state, background - the disabled state.

    body: SafeArea(
      child: Theme(
        data: ThemeData(
          canvasColor: Colors.yellow,
          colorScheme: Theme.of(context).colorScheme.copyWith(
                primary: Colors.green,
                background: Colors.red,
                secondary: Colors.green,
              ),
        ),
        child: Stepper(

The result in the dark mode.

Undertone

How to change disabled state color in light theme? – Miller

I afraid it is not possible. I've submitted the issue 2 weeks ago, you can vote to speed up the fixes. github.com/flutter/flutter/issues/102558 – Undertone

@Undertone how would you change the color of the icons and number within the circles, like the black tick mark to white and the 3 from white to black – Sthilaire

You can't github.com/flutter/flutter/issues/102558 you can vote for this issue, for speed up the fix. – Undertone

Answer 3

The color of the steps depends on ColorScheme.primary color, to change it you have to wrap Stepper with Theme and in ThemeData add colorScheme property like this:

Theme(
  data: ThemeData(
          colorScheme: Theme.of(context).colorScheme.copyWith(primary: yourColor),
              ),
  child: Stepper(...),
      );

Humiliate

Answer 4

As of flutter version 1.22.0, the stepper button colors are determined by ThemeData.colorScheme instead of ThemeData.primaryColor.

Margarettmargaretta

Answer 5

If you take a look at the Flutter package material stepper code you will see that the step's circular icon/indicator depends on whether it is active or not.

It will use your colorScheme.primary color when active in light mode, or your colorScheme.secondary colour when active in dark mode.

When a step is not the currently active one, it will use either:

Light Mode: Your colorScheme.onSurface value with an opacity of 0.38
Dark Mode: Your colorScheme.background colour

So, you can use a custom theme wrapped around your stepper to override your default theme; or, use the stepper's active state to control the current step's colour as intended by the widget.

Flutter Stepper _circleColor method:

Color _circleColor(int index) {
    final ColorScheme colorScheme = Theme.of(context).colorScheme;
    if (!_isDark()) {
      return widget.steps[index].isActive ? colorScheme.primary : colorScheme.onSurface.withOpacity(0.38);
    } else {
      return widget.steps[index].isActive ? colorScheme.secondary : colorScheme.background;
    }
  }

Example implementation in light mode :

 Theme(
         data: Theme.of(context).copyWith(
                    colorScheme: Theme.of(context)
                              .colorScheme
                              .copyWith(onSurface: Colors.red.shade200,
primary: Colors.red)),
                      child: Stepper());

Unrepair

Answer 6

Ctrl + right-click on Step (it takes you to Stepper.dart file) here you can find all the config and colors for the step. for me changed the continueenter image description here flat button by changing this code.

Deedee

Answer 7

Use Your Existing Theme Colors

For some reason, stepper does not inherit your main MaterialApp()'s theme. But you can wrap your Stepper() widget with Theme() and use your primary theme's colors anyways.

Assuming you're using the theme property of your MaterialApp(), and that you've set the colorScheme property with both primary and secondary colors. (as of Flutter 2.5, accentColor is officially deprecated)

A basic colorScheme example for ThemeData():

colorScheme: ColorScheme.fromSwatch().copyWith(primary: Colors.green, secondary: Colors.lightGreen),

To apply this colorScheme to your Stepper() widget, you can copy your primary theme using Theme.of(context).

Container(
  child: Theme(
    data: Theme.of(context),
    child: Stepper(
      ...
    ),
  ),
),

For Different Colors

Just create the new colorscheme here on the data property, the same way you'd apply the ThemeData() to your MaterialApp()'s theme property.

Reference

• ThemeData Docs
• ColorScheme Docs

Brimmer

Answer 8

Here's how I achieved this:

body: Theme(
  data: ThemeData(
    accentColor: Colors.blueAccent
  ),
  child: Stepper(
    steps: []
  ),
)

Basically wrap your stepper in a Theme widget and set the accentColor of ThemeData to your desired color.

Swords

Didn't work for me, only the 'Continue' color changed not the indexes of Stepper; – Requisite

If you don't want the above code to override all your styles use ThemeData.of(context).copyWith(). – Potomac

not working!!!! – Rika

Answer 9

Wrap your stepper in a Theme Widget

body: Theme(
  data: ThemeData(
    primaryColor: Colors.blueAccent
  ),
  child: Stepper(
    steps: []
  ),
)

Antistrophe

Answer 10

There is an open issue in flutter where color is hardcoded for stepper icons and numbers as per https://github.com/flutter/flutter/issues/102558.

Raulrausch

Answer 11

You can use connectorColor for Stepper line color

Material(
        color: lightGreen,
        shape: const RoundedRectangleBorder(
            borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(15),
                bottomRight: Radius.circular(15))),
        elevation: 1,
        child: Stepper(
          currentStep: 2,
          connectorThickness: 5,
          controlsBuilder: (context, details) {
            return Container();
          },
          steps: steps,
          connectorColor: MaterialStateProperty.resolveWith<Color>(
              (Set<MaterialState> states) =>  Color.fromRGBO(0, 178, 187, 1)[enter image description here][1]),
        ),
      ),

enter image description here

Couscous

Answer 12

 In Flutter 2 just follow this :
 
 Theme(
      data: ThemeData(colorScheme:          ColorScheme.fromSwatch().copyWith( primary: Color(0xfffada36),
                                  ),
                                ),

In flutter 2 just follow this: Theme( data: ThemeData( colorScheme: ColorScheme.fromSwatch().copyWith( primary: Color(0xfffada36), ), ),

Karyogamy

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Citronella