Search code examples
flutterstepper

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


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

Stepper in horziontal mode

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


Solution

  • 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