How to change background color of Stepper widget to transparent color?

user_11537949 0
Viewed 5306

Stepper widget's background color is transparent at the Vertical type. When change type like StepperType.horizontal, stepper has white-grey background color. How could I change that background color at the horizontal axis?

Here is my sample code:

Container(
   width: _width,
   child: Stepper(
      type: StepperType.horizontal,
      steps: [
        Step(
          title: Text("First"),
          content: Text("This is our first example."),
        ),
        Step(
          title: Text("Second"),
          content: Text("This is our second example."),
        ),
      ],
    ),
  ),
flutter
3 Answers

To change the background color of stepper widget wrap it into Theme and give it a color in Canvas color.

Container(
        width: _width,
        child: Theme(
          data: ThemeData(canvasColor: Colors.lightBlue),
          child: Stepper(
            type: StepperType.horizontal,
            steps: [
              Step(
                title: Text("First"),
                content: Text("This is our first example."),
              ),
              Step(
                title: Text("Second"),
                content: Text("This is our second example."),
              ),
            ],
          ),
        ),
      ),
user_50250150

I have made changes in the stepper package of flutter to customize the stepper. You can find the stepper package in the External Libraries/Dart packages/Flutter/src/material/stepper.dart. Here is the look now:

Preview

user_140167000

You could try to add :

Container(
    color: Colors.transparent,
    ...
),
user_101227910
Related