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

see https://github.com/flutter/flutter/blob/master/packages/flutter/lib/src/material/stepper.dart — pskink, Nov 16 '18 at 12:01
Thank you , so its using the primaryColor of the material app theme. :) — jbvvb, Nov 16 '18 at 12:29
Submitted a bug here https://github.com/flutter/flutter/issues/57364 the other buttons are using accentColor as button background... — giorgio79, May 16 '20 at 07:23

score 11 · Answer 1 · answered Sep 23 '20 at 08:36

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).

awaik · Answer 2 · 2022-04-26T08:11:56.453

8

In April 2022 these properties work

Light theme - primary - the active state, primary.withOpacity(0.38) will be used for the disabled state.
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.

edited Apr 26 '22 at 08:11

answered Apr 26 '22 at 07:07

awaik

10,143
2
44
50

How to change disabled state color in light theme? – Naveen May 11 '22 at 07:39
I afraid it is not possible. I've submitted the issue 2 weeks ago, you can vote to speed up the fixes. https://github.com/flutter/flutter/issues/102558 – awaik May 11 '22 at 14:41
@awaik 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 – Deepika Rao Jun 22 '22 at 06:52
You can't https://github.com/flutter/flutter/issues/102558 you can vote for this issue, for speed up the fix. – awaik Jun 22 '22 at 08:07

score 5 · Answer 3 · edited Jul 14 '21 at 16:02

5

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(...),
      );

edited Jul 14 '21 at 16:02

Lang Minh Nguyên

3,648
4
10
31

answered Jul 14 '21 at 14:03

twinsinc

123
2
11

score 3 · Answer 4 · answered Oct 06 '20 at 11:21

3

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

answered Oct 06 '20 at 11:21

Matt Breeland

31
1

matwr · Answer 5 · 2021-12-11T12:24:29.120

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());

score 1 · Answer 6 · answered Apr 08 '20 at 16:13

1

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.

answered Apr 08 '20 at 16:13

Cora Bica

79
2
1

score 1 · Answer 7 · answered Sep 12 '21 at 22:11

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

score 0 · Answer 8 · edited Feb 08 '21 at 15:38

0

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.

edited Feb 08 '21 at 15:38

NaKib

530
5
13

answered Mar 18 '19 at 12:50

user3004826

3,179
1
12
8

2

Didn't work for me, only the 'Continue' color changed not the indexes of Stepper; – Vishal Oct 14 '19 at 21:34
If you don't want the above code to override all your styles use `ThemeData.of(context).copyWith()`. – Lee Mordell Jan 27 '21 at 20:24
not working!!!! – devmuaz Jan 17 '22 at 14:47

score 0 · Answer 9 · edited Feb 08 '21 at 13:29

0

Wrap your stepper in a Theme Widget

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

edited Feb 08 '21 at 13:29

NaKib

530
5
13

answered Nov 13 '19 at 09:53

ashutosh

51
6

score 0 · Answer 10 · answered Jul 08 '23 at 08:33

0

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.

answered Jul 08 '23 at 08:33

Anshul mittal

121
3

score -1 · Answer 11 · answered Dec 05 '21 at 19:30

-1

 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), ), ),

answered Dec 05 '21 at 19:30

Mir Moktadir

11
1

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](/help/how-to-answer). – Community Dec 06 '21 at 03:46

Flutter - Change Stepper - Step Color

11 Answers11

Use Your Existing Theme Colors

For Different Colors

Reference

Linked