In Flutter' Stepper, how to put the title of the Step below the counter?

Question

If use the Stepper in horizontal mode, I get the following result.

However, I want the title of the Step to appear below the counter. How can I achieve that in Flutter?

Andrii Turkovskyi · Accepted Answer · 2018-12-18T15:09:35.000

3

In _StepperState class there is method _buildHorizontal with code:

Row(
        children: <Widget>[
          Container(
            height: 72.0,
            child: Center(
              child: _buildIcon(i),
            ),
          ),
          Container(
            margin: const EdgeInsetsDirectional.only(start: 12.0),
            child: _buildHeaderText(i),
          ),
        ],
      ),

where _buildHeaderText returns title or title with subtitle. So, you can't do what you want with standard Stepper - you have to customize this class

edited Dec 18 '18 at 15:09

answered Dec 18 '18 at 15:04

Andrii Turkovskyi

27,554
16
95
105

I am also trying to make the same. what you mean by customize this class. You mean _StepperState?. How can I customize that? – Mahi Feb 01 '22 at 16:21
@Mahi for customising you have to copy source code to your project and change what you want – Andrii Turkovskyi Feb 03 '22 at 08:16
1

You may also use `label` parameter of `Step` class which is positioned below the circle. – Politechniczny Mar 28 '23 at 16:34

In Flutter' Stepper, how to put the title of the Step below the counter?

1 Answers1

Linked