Reduce Flutter Stepper Bar size

Question

I'm using flutter Stepper for my UI . I want to reduce the height of the stepper horizontal menu. Please help me.

Answer 1

I think currently the Widget doesn't giving you option to do so. But, if you look into the widget's source code, you can look for something like height of a SizeBox() inside of a _buildHorizontal()'s function and here you can see that it was set with constant value. Mine's look like this (I use flutter 3.10.0):

...
   SizedBox(
       height: _isLabel() ? 104.0 : 72.0,
...

You can this value. But, it will only work on your machines. If someone else build on their machines it will have original height.

Answer 2

1

You can also change the heights of the widgets in the contents of Steps to the same value, and make it a SingleChildScrollView if needed. e.g

Step(content: Container(
     height: MediaQuery.of(context).size.height - 250, //IMPORTANT
     child: SingleChildScrollView(
     child: Column(children: <Widget>[
    ...
),

2 This should work. Stepper has an argument called type where you can decide it's type. More info here: https://medium.com/flutterdevs/stepper-widget-in-flutter-37ce5b45575b

You may have to play around with the UI to make it look like your desired photo, but this should get you on track. Just set type: StepperType.horizontal.

 Widget build(BuildContext context) {
  return Container(
  height: 300,
  width: 300,
  child: Stepper(
    type: StepperType.horizontal,
    currentStep: _index,
    onStepCancel: () {
      if (_index <= 0) {
        return;
      }
      setState(() {
        _index--;
      });
    },
    onStepContinue: () {
      if (_index >= 1) {
        return;
      }
      setState(() {
        _index++;
      });
    },
    onStepTapped: (index) {
      setState(() {
        _index = index;
      });
    },
    steps: [
      Step(
        title: Text("Step 1 title"),
        content: Container(
            alignment: Alignment.centerLeft,
            child: Text("Content for Step 1")),
      ),
      Step(
        title: Text("Step 2 title"),
        content: Text("Content for Step 2"),
      ),
    ],
  ),
 );
}