Handling overflow of horizontal stepper

user_4435719 0
Viewed 3251

I implemented a very simple horizontal stepper with a few steps. However i get the overflow banner stating that my steps does not fit the view.

How can I make the bar with the steps scrollable? 

import 'package:flutter/material.dart';

class SetupPage extends StatefulWidget {
  @override
  _SetupPageState createState() => _SetupPageState();
}

class _SetupPageState extends State<SetupPage> {

  List<Step> steps = [
    new Step(title: Text('Step 1'), content: new Container()),
    new Step(title: Text('Step 2'), content: new Container()),
    new Step(title: Text('Step 3'), content: new Container()),
    new Step(title: Text('Step 4'), content: new Container()),
    new Step(title: Text('Step 5'), content: new Container()),
    new Step(title: Text('Step 6'), content: new Container()),
    new Step(title: Text('Step 7'), content: new Container()),
  ];

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: AppBar(title: Text('Setup'),),
      body: new Stepper(steps: steps, type: StepperType.horizontal, currentStep: 0,),
    );
  }
}
flutter
2 Answers

I looked at the source code of the Stepper and it does not handle overflow horizontally in its header (the bar with the steps). The scrollPhysics property is not even used in _buildHorizontal, the method called to build the header when its direction is horizontal.

At time of writing this appears to be completely unsupported. I opened an issue on the flutter github page so maybe it will get fixed.

user_84746430

@Jens: please try to use this package to custom horizontal stepper, with this example

user_122840220
Related