Flutter动态步骤管理插件dynamic_stepper的使用

特性

开始使用

在需要的地方添加以下导入：

import 'package:dynamic_stepper/dynamic_stepper.dart';

使用方法

将原来的 Stepper 替换为 DynamicStepper：

final steps = [
  DynamicStep(
    title: const Text('步骤 1 标题'),
    content: Container(
      alignment: Alignment.centerLeft,
      child: const Text('步骤 1 的内容'),
    ),
  ),
  const DynamicStep(
    title: Text('步骤 2 标题'),
    content: Text('步骤 2 的内容'),
  ),
];

// ...
DynamicStepper(
  currentStep: _index,
  onStepCancel: () {
    // 处理取消
  },
  onStepContinue: () {
    // 处理继续
  },
  onStepTapped: (int index) {
    // 处理点击
  },
  steps: steps,
)

注意：属性名称已替换以避免与原始 Stepper 冲突，因此添加了 Dynamic 前缀。

DynamicStepper

DynamicStep

DynamicStepType …

完整示例代码

以下是一个完整的示例代码，展示了如何动态添加和删除步骤：

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

void main() => runApp(const MyApp());

const String _title = 'Flutter Code Sample';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatefulWidget(),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({super.key});

  [@override](/user/override)
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _index = 0;

  final steps = [
    DynamicStep(
      title: const Text('步骤 1 标题'),
      content: Container(
        alignment: Alignment.centerLeft,
        child: const Text('步骤 1 的内容'),
      ),
    ),
    const DynamicStep(
      title: Text('步骤 2 标题'),
      content: Text('步骤 2 的内容'),
    ),
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text(_title)),
      body: Center(
        child: DynamicStepper(
          currentStep: _index,
          onStepCancel: () {
            if (_index > 0) {
              setState(() {
                _index -= 1;
              });
            }
          },
          onStepContinue: () {
            if (_index < steps.length - 1) {
              setState(() {
                _index += 1;
              });
            }
          },
          onStepTapped: (int index) {
            setState(() {
              _index = index;
            });
          },
          steps: steps,
        ),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          FloatingActionButton(
            onPressed: () {
              if (steps.length == 1) return;
              steps.removeLast();
              if (_index == steps.length) _index--;
              setState(() {});
            },
            child: const Icon(Icons.remove),
          ),
          FloatingActionButton(
            onPressed: () {
              steps.add(DynamicStep(
                title: Text('步骤 ${steps.length + 1} 标题'),
                content: Text('步骤 ${steps.length + 1} 的内容'),
              ));
              setState(() {});
            },
            child: const Icon(Icons.add),
          ),
        ],
      ),
    );
  }
}