使用 Flutter Form Builder 包实现 Stepper Widget

Question

任何使用 Stepper Widget 和 flutter form builder package 的人，我想看一个示例代码如何实现它以及验证，提前致谢

Answer 1

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

Answer 2

您可以执行以下操作：

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。通过 content 属性可以编辑每个 Step。此时您还可以包括您的 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')),
      ],
    ),

示例取自 here。

Answer 3

您可以使用以下 link 作为参考，您可以在其中看到水平和垂直步进器。

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

以下是截屏结果：

使用 Flutter Form Builder 包实现 Stepper Widget

implement Stepper Widget with Flutter Form Builder Package

dart

flutter

flutter-dependencies

flutter-packages

flutter-form-builder