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.

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

To see it in action, copy and run this code snippet on DartPad.

import 'package:material_ui/material_ui.dart';

/// Flutter code sample for [Stepper.controlsBuilder].

void main() => runApp(const ControlsBuilderExampleApp());

class ControlsBuilderExampleApp extends StatelessWidget {
  const ControlsBuilderExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Stepper Sample')),
        body: const ControlsBuilderExample(),
      ),
    );
  }
}

class ControlsBuilderExample extends StatelessWidget {
  const ControlsBuilderExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Stepper(
      controlsBuilder: (BuildContext context, ControlsDetails details) {
        return Row(
          children: <Widget>[
            TextButton(
              onPressed: details.onStepContinue,
              child: const Text('NEXT'),
            ),
            TextButton(
              onPressed: details.onStepCancel,
              child: const Text('CANCEL'),
            ),
          ],
        );
      },
      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)),
      ],
    );
  }
}

Implementation

Stepper class