fluttermaterial-design

Flutter remove built in box shadow of Material Stepper


I'm using the Stepper from material design in my desktop application with Flutter. But as shown in the image, the Stepper has a default BoxShadow which I want to remove. I already looked through the stepper.dart file which builds the stepper, but I couldn't find any decoration which would result in the shadow.

enter image description here

This is the extract of my Stepper implementation:

child: Padding(
  padding: const EdgeInsets.all(80.0),
  child: Stepper(
    steps: steps,
    type: StepperType.horizontal,
    currentStep: currentStep,
    onStepContinue: next,
    onStepCancel: cancel,
    onStepTapped: (step) => goTo(step),
  ),
),

I'm guessing that it is some kind of configuration from material design which automatically assigns a shadow to the stepper.

Is there a way to configure/remove the Shadow of the stepper?


Solution

  • if you go into source code you'll see Material widget with elevation: 2.0

    so, I think you have two choices:

    1. create your own Stepper based on source code (with removed elevation property)
    2. set shadow color to transparent like this
    Theme(
      data: ThemeData(shadowColor: Colors.transparent),
      child: Padding(
        padding: const EdgeInsets.all(80.0),
        child: Stepper(
          steps: steps,
          type: StepperType.horizontal,
          currentStep: currentStep,
          onStepContinue: next,
          onStepCancel: cancel,
          onStepTapped: (step) => goTo(step),
        ),
      ),
    ),