How to align stepper and text in Flutter?

Question

I'm currently using the Stepper widget and trying to recreate something as shown below. I can't understand how to align the text below the circle instead of on the right. This is my code:

Widget build(BuildContext context) {
    return Container(
      height: 300,
      width: 300,
      child: Stepper(
       
        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"),
          ),
        ],
      ),
    );
  }

Current code result:

Trying to achieve:

score 1 · Answer 1 · answered Mar 25 '21 at 14:21

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

Rahmad Farizan · Answer 2 · 2022-10-29T07:17:24.183

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

Welcome to Stack Overflow! While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. — Yunnosch, Oct 29 '22 at 07:15

How to align stepper and text in Flutter?

2 Answers2