Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 371
jbvvb Avatar asked Dec 23 '22 02:12

jbvvb


2 Answers

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

like image 63
Rajan Avatar answered Feb 04 '23 05:02

Rajan


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(...),
      );
like image 45
twinsinc Avatar answered Feb 04 '23 07:02

twinsinc