颤动步进器 Vertical/Horizontal 溢出

Question

我有超过 3 个步进器。

步进器正常工作 Vertical 方向但是当我切换 Horizontal 与 FloatingActionButton 然后 Overflow Pixel.

附上截图：-

我的代码：-

import 'package:flutter/material.dart';

class StepperEx extends StatefulWidget {
  @override
  _StepperExState createState() => _StepperExState();
}

class _StepperExState extends State<StepperEx> {
  int _currentStep = 0;
  StepperType stepperType = StepperType.vertical;

  switchStepType() {
    setState(() => stepperType == StepperType.vertical
        ? stepperType = StepperType.horizontal
        : stepperType = StepperType.vertical);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        title: Text('Stepper Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Stepper(
              //physics: ClampingScrollPhysics(),
              steps: _stepper(),
              type: stepperType,
              currentStep: this._currentStep,
              onStepTapped: (step) {
                setState(() {
                  this._currentStep = step;
                });
              },
              onStepContinue: () {
                setState(() {
                  if (this._currentStep < this._stepper().length - 1) {
                    this._currentStep = this._currentStep + 1;
                  } else {
                    //Logic
                    print('complete');
                  }
                });
              },
              onStepCancel: () {
                setState(() {
                  if (this._currentStep > 0) {
                    this._currentStep = this._currentStep - 1;
                  } else {
                    this._currentStep = 0;
                  }
                });
              },
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.swap_horizontal_circle),
        onPressed: switchStepType,
      ),
    );
  }

  List<Step> _stepper() {
    List<Step> _steps = [
      Step(
          title: Text('Name'),
          content: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'First Name'),
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Last Name'),
              ),
            ],
          ),
          isActive: _currentStep >= 0,
          state: StepState.complete),
      Step(
          title: Text('Email'),
          content: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Email Address'),
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Recovery Email'),
              ),
            ],
          ),
          isActive: _currentStep >= 1,
          state: StepState.disabled),
      Step(
          title: Text('Mobile No.'),
          content: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Mobile No.'),
              ),
              TextFormField(
                decoration:
                    InputDecoration(labelText: 'Alternative Mobile No.'),
              ),
            ],
          ),
          isActive: _currentStep >= 2,
          state: StepState.editing),
      Step(
          title: Text('Address'),
          content: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Address 1'),
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Address 2'),
              ),
            ],
          ),
          isActive: _currentStep >= 3,
          state: StepState.error),
      Step(
          title: Text('Password'),
          content: Column(
            children: <Widget>[
              TextFormField(
                decoration: InputDecoration(labelText: 'Password'),
              ),
              TextFormField(
                decoration: InputDecoration(labelText: 'Confirm Password'),
              ),
            ],
          ),
          isActive: _currentStep >= 4,
          state: StepState.indexed),
    ];
    return _steps;
  }
}

Answer 1

正如 Vineet 提到的，它是 Stepper 中的一个问题。还有一个项目（称为 fa_stepper），您可以使用它来拥有一个滚动条：

https://github.com/dipnv/flutter_stepper/tree/master/horizontal_stepper

Answer 2

更改 Flutter Stepper Widget 包中的文本和图标的大小。 Flutter Stepper Class

C:\location\flutter\packages\flutter\lib\src\material\stepper.dart

颤动步进器 Vertical/Horizontal 溢出

Flutter Stepper Vertical/Horizontal Overflow

overflow

horizontal-scrolling

flutter

stepper