Flutter stepper horizontal scroll

by

Flutter Stepper with Horizontal Scroll

Implementing a horizontal scrollable stepper in Flutter involves using a combination of widgets and applying specific properties and constraints to achieve the desired result.

Step 1: Create a Stepper Widget

First, create a Stepper widget by configuring the steps and their content. Each step will be represented by a Step widget with a title and content:

    
    Stepper(
      steps: [
        Step(
          title: Text('Step 1'),
          content: Text('Content for Step 1'),
        ),
        Step(
          title: Text('Step 2'),
          content: Text('Content for Step 2'),
        ),
        // Add more steps as needed
      ],
    )

Step 2: Configure Stepper properties

To enable horizontal scrolling, wrap the Stepper widget with a SingleChildScrollView widget and set its scrollDirection property to Axis.horizontal:

    
    SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Stepper(
        steps: [
          // Configure Steps as shown in Step 1
        ],
      ),
    )

Step 3: Customize Step indicator

By default, the Step widget uses a CircleAvatar as an indicator for each step. To customize the step indicator, provide a custom builder function via the controlsBuilder property of Stepper widget. This function defines how each step should be displayed:

    
    Stepper(
      controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
        return Row(
          children: [
            FlatButton(
              onPressed: onStepCancel,
              child: Text('Back'),
            ),
            FlatButton(
              onPressed: onStepContinue,
              child: Text('Next'),
            ),
          ],
        );
      },
      // Configure Steps as shown in Step 1
    )

Complete Example

Here’s a complete example of a horizontal scrollable stepper with customized step indicator:

    
    Container(
      height: 300, // Set a fixed height to limit the stepper's size
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Stepper(
          controlsBuilder: (BuildContext context, {VoidCallback onStepContinue, VoidCallback onStepCancel}) {
            return Row(
              children: [
                FlatButton(
                  onPressed: onStepCancel,
                  child: Text('Back'),
                ),
                FlatButton(
                  onPressed: onStepContinue,
                  child: Text('Next'),
                ),
              ],
            );
          },
          steps: [
            Step(
              title: Text('Step 1'),
              content: Text('Content for Step 1'),
            ),
            Step(
              title: Text('Step 2'),
              content: Text('Content for Step 2'),
            ),
            // Add more steps as needed
          ],
        ),
      ),
    )

By following these steps and customizing the properties as desired, you can achieve a horizontal scrollable stepper in your Flutter project.

Leave a comment