controlsBuilder property

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 --template=stateless_widget_scaffold} Creates a stepper control with custom buttons.

Widget build(BuildContext context) {
  return ModernFormStepper(
    controlsBuilder:
      (BuildContext context, ControlsDetails details) {
         return Row(
           children: <Widget>[
             TextButton(
               onPressed: details.onModernFormStepContinue,
               child: Text('Continue to ModernFormStep ${details.stepIndex + 1}'),
             ),
             TextButton(
               onPressed: details.onModernFormStepCancel,
               child: Text('Back to ModernFormStep ${details.stepIndex - 1}'),
             ),
           ],
         );
      },
    steps: const <ModernFormStep>[
      ModernFormStep(
        title: Text('A'),
        content: SizedBox(
          width: 100.0,
          height: 100.0,
        ),
      ),
      ModernFormStep(
        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

ModernFormStepper class