CODEWITHSUNDEEP
flutterflutter-layoutstepper
jbvvb
jbvvb

Reputation: 141

Flutter - Change Stepper - Step Color

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

Upvotes: 12

Views: 29646

Answers (13)

GoedertDalmolin
GoedertDalmolin

Reputation: 81

To update the colors of the Stepper widget, you can simply modify the stepStyle property from the Step widget found in the steps property.

Example:

                Stepper(
                  steps:  [
                    Step(
                      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,
                      ),
                      title: Text(
                        'New Colors Style',
                        style: TextStyle(color: Colors.white),
                      ),
                      content: SizedBox(),
                    ),
                    Step(
                      title: Text(
                        'No Changed Colors Style',
                        style: TextStyle(color: Colors.white),
                      ),
                      content: SizedBox(),
                    ),
                  ],
                )

Credits to the GitHub user: rashidotm

Upvotes: 0

Susant Kumar Bhuyan
Susant Kumar Bhuyan

Reputation: 27

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

Upvotes: 0

Anshul mittal
Anshul mittal

Reputation: 121

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.

Upvotes: 0

awaik
awaik

Reputation: 12287

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.

enter image description here

Upvotes: 10

matwr
matwr

Reputation: 1571

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

Upvotes: 2

Mir Moktadir
Mir Moktadir

Reputation: 11

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

Upvotes: -1

Matthew Rideout
Matthew Rideout

Reputation: 8518

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

Upvotes: 1

twinsinc
twinsinc

Reputation: 173

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

Upvotes: 5

user3004826
user3004826

Reputation: 3289

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.

Upvotes: 0

ashutosh
ashutosh

Reputation: 49

Wrap your stepper in a Theme Widget

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

Upvotes: 0

Matt Breeland
Matt Breeland

Reputation: 31

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

Upvotes: 3

Rajan
Rajan

Reputation: 389

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

Upvotes: 12

Cora Bica
Cora Bica

Reputation: 109

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.

Upvotes: 1

Related Questions