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

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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.

Answer 6

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

Answer 7

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

Answer 8

Wrap your stepper in a Theme Widget

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

Answer 9

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.

Answer 10

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