flutter - 使用 Flutter Form Builder Package 实现 Stepper Widget

Question

任何使用带有颤振表单构建器包的Stepper Widget的人，我想看一个示例代码如何实现它并进行验证，在此先感谢

Answer 1

您可以执行以下操作：

import "package:flutter/material.dart";
import 'package:flutter_widgets/const/_const.dart';

class StepperPage extends StatefulWidget {
  @override
  _StepperState createState() => _StepperState();
}

class _StepperState extends State<StepperPage> {
  var _index = 0;

  Widget _simpleStep() => Container(
        color: RED,
        child: Stepper(
          steps: [
            Step(
              title: Text("Start"),
              content: Text("Before starting, we should create a page."),
            ),
            Step(
              title: Text("Constructor"),
              content: Text("Let's look at its construtor."),
            ),
          ],
        ),
      );

  Widget _steps() => Container(
        margin: EdgeInsets.only(top: 10),
        color: GREEN,
        child: Stepper(
          steps: [
            Step(
              title: Text("First"),
              subtitle: Text("This is our first article"),
              content: Text(
                  "In this article, I will tell you how to create a page."),
            ),
            Step(
                title: Text("Second"),
                subtitle: Text("Constructor"),
                content: Text("Let's look at its construtor."),
                state: StepState.editing,
                isActive: true),
            Step(
                title: Text("Third"),
                subtitle: Text("Constructor"),
                content: Text("Let's look at its construtor."),
                state: StepState.error),
          ],
        ),
      );

  Widget _typeStep() => Container(
        margin: EdgeInsets.only(top: 10),
        constraints: BoxConstraints.expand(height: 200),
        color: BLUE_LIGHT,
        child: Stepper(
          type: StepperType.horizontal,
          steps: [
            Step(
              title: Text("First"),
              content: Text("This is our first example."),
            ),
            Step(
              title: Text("Second"),
              content: Text("This is our second example."),
            ),
          ],
        ),
      );

  Widget _tabStep() => Container(
        margin: EdgeInsets.only(top: 10),
        color: PURPLE,
        child: Stepper(
          steps: [
            Step(
              title: Text("First"),
              content: Text("This is our first example."),
            ),
            Step(
              title: Text("Second"),
              content: Text("This is our second example."),
            ),
            Step(
              title: Text("Third"),
              content: Text("This is our third example."),
            ),
            Step(
              title: Text("Forth"),
              content: Text("This is our forth example."),
            ),
          ],
          currentStep: _index,
          onStepTapped: (index) {
            setState(() {
              _index = index;
            });
          },
          onStepCancel: () {
            print("You are clicking the cancel button.");
          },
          onStepContinue: () {
            print("You are clicking the continue button.");
          },
        ),
      );

  Widget _builderStep() => Container(
        margin: EdgeInsets.only(top: 10),
        color: RED,
        child: Stepper(
          steps: [
            Step(
              title: Text("First"),
              content: Text("This is our first example."),
            ),
            Step(
              title: Text("Second"),
              content: Text("This is our second example."),
            ),
            Step(
              title: Text("Third"),
              content: Text("This is our third example."),
            ),
            Step(
              title: Text("Forth"),
              content: Text("This is our forth example."),
            ),
          ],
          currentStep: _index,
          onStepTapped: (index) {
            setState(() {
              _index = index;
            });
          },
          controlsBuilder: (BuildContext context,
                  {VoidCallback onStepContinue, VoidCallback onStepCancel}) =>
              Container(),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(PageName.STEPPER),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: <Widget>[
              //our code.
              _simpleStep(),
              _steps(),
              _typeStep(),
              _tabStep(),
              _builderStep(),
              SizedBox(height: 600)
            ],
          ),
        ));
  }
}

您可以使用Stepper并添加Step您只需要跟踪您当前所处的步骤即可。你可以使用controlsBuilder它。Step可以通过content属性编辑每个。此时，您还可以包含您的formbuilder. 例如。将内容替换为以下内容：

    FormBuilderChoiceChip(
      name: 'choice_chip',
      decoration: InputDecoration(
        labelText: 'Select an option',
      ),
      options: [
        FormBuilderFieldOption(
            value: 'Test', child: Text('Test')),
        FormBuilderFieldOption(
            value: 'Test 1', child: Text('Test 1')),
        FormBuilderFieldOption(
            value: 'Test 2', child: Text('Test 2')),
        FormBuilderFieldOption(
            value: 'Test 3', child: Text('Test 3')),
        FormBuilderFieldOption(
            value: 'Test 4', child: Text('Test 4')),
      ],
    ),

示例取自这里。

Answer 2

你可以在这里找到一个例子eeee https://codingwithdhrumil.com/2020/10/flutter-stepper-widget-example.html

Answer 3

您可以使用以下链接作为参考，您可以在其中看到 Stepper Horizo​​ntal 和 Vertical 两者。

https://developer.school/flutter-how-to-use-the-stepper-widget/

以下是结果不足的屏幕：