Flutter步进器控件插件stepper_complete的使用

当然，下面是一个关于如何在Flutter项目中使用stepper_complete插件来创建步进器控件的示例代码。这个插件提供了比Flutter自带的Stepper控件更丰富的功能和更高的自定义能力。

首先，确保你已经在pubspec.yaml文件中添加了stepper_complete依赖：

dependencies:
  flutter:
    sdk: flutter
  stepper_complete: ^x.y.z  # 请替换为最新版本号

然后，运行flutter pub get来安装依赖。

接下来，在你的Dart文件中，你可以按照以下方式使用stepper_complete插件：

import 'package:flutter/material.dart';
import 'package:stepper_complete/stepper_complete.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stepper Complete Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Stepper Complete Example'),
        ),
        body: StepperCompleteDemo(),
      ),
    );
  }
}

class StepperCompleteDemo extends StatefulWidget {
  @override
  _StepperCompleteDemoState createState() => _StepperCompleteDemoState();
}

class _StepperCompleteDemoState extends State<StepperCompleteDemo> {
  final _formKey = GlobalKey<FormState>();
  List<Step> _steps = List.generate(
    3,
    (index) => Step(
      title: Text('Step $index'),
      content: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          TextFormField(
            decoration: InputDecoration(labelText: 'Input $index'),
            validator: (value) {
              if (value == null || value.isEmpty) {
                return 'Please enter some text';
              }
            },
          ),
        ],
      ),
    ),
  );

  int _currentIndex = 0;

  void _submit() {
    if (_formKey.currentState.validate()) {
      _formKey.currentState.save();
      // 在这里处理表单提交，例如导航到下一个页面或显示结果
      ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text('All steps completed')));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: StepperComplete(
        steps: _steps,
        type: StepperType.vertical, // 或者使用 StepperType.horizontal
        currentStep: _currentIndex,
        controlsBuilder: (BuildContext context,
            {VoidCallback? onNext, VoidCallback? onBack, VoidCallback? onComplete}) {
          return Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              if (_currentIndex > 0)
                ElevatedButton(
                  onPressed: onBack,
                  child: Text('BACK'),
                ),
              ElevatedButton(
                onPressed: _currentIndex < _steps.length - 1 ? onNext : onComplete,
                child: Text(_currentIndex < _steps.length - 1 ? 'NEXT' : 'DONE'),
              ),
            ],
          );
        },
        onStepChange: (int index) {
          setState(() {
            _currentIndex = index;
          });
        },
        onStepCancel: () {
          // 处理取消操作，如果需要的话
        },
      ),
    );
  }
}

这个示例展示了如何使用stepper_complete插件创建一个垂直步进器，其中包含三个步骤，每个步骤都包含一个文本输入框。用户可以通过点击“BACK”和“NEXT”按钮来导航不同的步骤，并在完成所有步骤后点击“DONE”按钮。

注意：

• StepperComplete的steps属性接受一个Step对象的列表，每个Step对象包含一个标题（title）和内容（content）。
• controlsBuilder属性允许你自定义步进器的控制按钮。
• onStepChange回调用于处理步骤变化。
• onStepCancel回调可用于处理取消操作，虽然在这个示例中并未使用。

确保根据stepper_complete插件的最新文档调整代码，因为API可能会随着版本更新而变化。