Reduce Flutter Stepper Bar size-CodePudding

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

CodePudding user response：

I am sure you have got the answer, but maybe this is for someone who is looking for a package instead of creating a custom one. Here is something that I found good, please do check out and see if it fits in your use-case.

https://pub.dev/packages/im_stepper

CodePudding user response：

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"),
      ),
    ],
  ),
 );
}