在 Flutter 中自定义 Stepper答案

【问题标题】：Customize Stepper in Flutter在 Flutter 中自定义 Stepper
【发布时间】：2020-01-28 12:38:43
【问题描述】：

我想在 Flutter 中自定义步进器。

如何将步骤标题放在每个步骤栏的左侧？
如何将线栏改为步进器的虚线？
除了像圆形气泡一样提供的 5 个 StepState 之外，我如何自定义 step 的 state？ p>

这是我的代码。

Container(
  child: Stepper(
    currentStep: 0,
    controlsBuilder: (BuildContext context, {
      VoidCallback onStepContinue,
      VoidCallback onStepCancel
    }) => Container(),
    steps: [
      Step(
        content: Container(
          child: Card(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Text('9:00Am - 10:00AM'),
                Text(
                  'Everest Tour',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
              ],
            ),
          ),
        ),
        title: Text('9:00 AM'),
      ),
      Step(
        content: Text('2nd Data'),
        title: Text('10:00 AM'),
        state: StepState.editing,
        isActive: true,
        subtitle: Text('subtitle')
      )
    ],
  ),
)

【问题讨论】：

Stepper 小部件似乎不支持您想做的事情。您必须创建自己的步进器小部件。
嗨@JoãoSoares 感谢您的信息。

标签： flutter dart

【解决方案1】：

您可以通过修改原始 Stepper 小部件类来自定义 Stepper 小部件。这是我创建的customized Stepper widget，可以使用可选的stepIndicatorAlignment 和dottedLine 参数进行配置。 “继续”和“取消”按钮上的文字也可以修改。

这是一个关于如何实现它的示例。

CustomStepper(
  // stepIndicatorAlignment is set to StepIndicatorAlignment.left by default if not configured
  stepIndicatorAlignment: StepIndicatorAlignment.right,
  // dottedLine is set to false by default if not configured
  dottedLine: true, 
  currentStep: _index,
  onStepCancel: () {
    if (_index > 0) {
      setState(() {
        _index -= 1;
      });
    }
  },
  onStepContinue: () {
    if (_index <= 0) {
      setState(() {
        _index += 1;
      });
    }
  },
  onStepTapped: (int index) {
    setState(() {
      _index = index;
    });
  },
  steps: <CustomStep>[
    CustomStep(
      title: const Text('Step 1 title'),
      content: Container(
        alignment: Alignment.centerLeft,
        child: const Text('Content for Step 1'),
      ),
      continueButtonLabel: 'YES',
      cancelButtonLabel: 'NO',
    ),
    CustomStep(
      title: Text('Step 2 title'),
      content: Container(
        alignment: Alignment.centerLeft,
        child: Text('Content for Step 2'),
      ),
    ),
  ],
),

在这个similar Stack Overflow post 中，我已经解释了我如何能够修改库存的 Flutter Stepper 小部件。

【讨论】：