controlsBuilder property

ControlsWidgetBuilder? controlsBuilder

The callback for creating custom controls.

If null, the default controls from the current theme will be used.

This callback which takes in a context and a ControlsDetails object, which contains step information and two functions: onStepContinue and onStepCancel. These can be used to control the stepper. For example, reading the ControlsDetails.currentStep value within the callback can change the text of the continue or cancel button depending on which step users are at.

{@tool dartpad} Creates a stepper control with custom buttons.

Widget build(BuildContext context) {
  return Stepper(
    controlsBuilder:
      (BuildContext context, ControlsDetails details) {
         return Row(
           children: <Widget>[
             TextButton(
               onPressed: details.onStepContinue,
               child: Text('Continue to Step ${details.stepIndex + 1}'),
             ),
             TextButton(
               onPressed: details.onStepCancel,
               child: Text('Back to Step ${details.stepIndex - 1}'),
             ),
           ],
         );
      },
    steps: const <Step>[
      Step(
        title: Text('A'),
        content: SizedBox(
          width: 100.0,
          height: 100.0,
        ),
      ),
      Step(
        title: Text('B'),
        content: SizedBox(
          width: 100.0,
          height: 100.0,
        ),
      ),
    ],
  );
}

** See code in examples/api/lib/material/stepper/stepper.controls_builder.0.dart ** {@end-tool}

Implementation

final ControlsWidgetBuilder? controlsBuilder;