Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Handling overflow of horizontal stepper

Tags:

flutter

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,),
    );
  }
}
like image 676
Jens Avatar asked Aug 31 '18 09:08

Jens


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.

like image 156
Miles Adamson Avatar answered Oct 01 '22 11:10

Miles Adamson


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

like image 44
dipnv Avatar answered Oct 01 '22 11:10

dipnv