Flutter步骤指示器插件flutter_stepindicator的使用

FlutterStepIndicator 是一个用于创建步骤指示器的多功能 Flutter 组件，适用于展示多步骤流程。它提供了广泛的自定义选项和功能来增强用户体验。

主要特性

• 步骤显示：以吸引人的格式轻松可视化步骤列表或阶段。
• 当前步骤高亮：高亮当前步骤以便于进度跟踪。
• 可定制性：自定义活动和非活动步骤的外观，包括颜色选择。
• 自定义勾选标记：使用自定义小部件（如勾选标记）作为成功指示符。
• 动画效果：配置动画时长以实现平滑的步骤过渡和自定义动画。
• 个性化：调整步骤的颜色、大小和形状以匹配应用的设计。
• 步骤变更通知：使用 onChange 回调实现自定义操作。
• 可选择性和验证：控制步骤的选择性以引导用户交互。

安装

在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter_stepindicator: ^0.1.7

然后运行 flutter pub get 来获取包。

使用方法

导入包并在 Dart 文件中创建 FlutterStepIndicator 小部件，并提供必要的参数：

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int page = 1;
  int counter = 4;
  List<int> list = [0, 1, 2, 3, 4, 5];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("PuzzleTak - Flutter_stepIndicator"),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            _example1(),
          ],
        ),
      ),
    );
  }

  Widget _example1() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 4, vertical: 5),
      child: Container(
        decoration: BoxDecoration(
          color: Theme.of(context).colorScheme.inversePrimary.withOpacity(0.0),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 15),
              alignment: Alignment.topLeft,
              child: Text(
                "Automatically scroller",
                style: TextStyle(
                  color: Theme.of(context).colorScheme.inverseSurface,
                  fontWeight: FontWeight.bold,
                  fontSize: 16,
                ),
              ),
            ),
            SizedBox(
              width: double.maxFinite,
              height: 30,
              child: Padding(
                padding: const EdgeInsets.symmetric(horizontal: 7),
                child: FlutterStepIndicator(
                  height: 28,
                  paddingLine: const EdgeInsets.symmetric(horizontal: 0),
                  positiveColor: const Color(0xFF00B551),
                  progressColor: const Color(0xFFEA9C00),
                  negativeColor: const Color(0xFFD5D5D5),
                  padding: const EdgeInsets.all(4),
                  list: list,
                  division: counter,
                  onChange: (i) {},
                  page: page,
                  onClickItem: (p0) {
                    setState(() {
                      page = p0;
                    });
                  },
                ),
              ),
            ),
            widgetOption(
              title: "update step ($page)",
              callAdd: () {
                if (page < list.length) {
                  setState(() {
                    page++;
                  });
                }
              },
              callRemove: () {
                if (page > 0) {
                  setState(() {
                    page--;
                  });
                }
              },
            ),
            widgetOption(
              title: "add item in list (${list.length})",
              callAdd: () {
                setState(() {
                  list.add(Random().nextInt(100));
                });
              },
              callRemove: () {
                setState(() {
                  list.removeAt(list.length - 1);
                });
              },
            ),
            widgetOption(
              title: "counter show (${counter - 1})",
              callAdd: () {
                setState(() {
                  counter++;
                });
              },
              callRemove: () {
                setState(() {
                  counter--;
                });
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget widgetOption({
    required String title,
    required VoidCallback callAdd,
    required VoidCallback callRemove,
  }) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 10),
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 5, vertical: 10),
        decoration: BoxDecoration(
          color: Colors.blueGrey.withOpacity(0.03),
          borderRadius: BorderRadius.circular(15),
        ),
        child: Column(
          children: [
            Container(
              width: double.maxFinite,
              height: 30,
              alignment: Alignment.center,
              child: Text(
                title,
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                ElevatedButton(
                  onPressed: callAdd,
                  child: const Icon(Icons.add),
                ),
                ElevatedButton(
                  onPressed: callRemove,
                  child: const Icon(Icons.remove),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

参数说明

• height: 设置步骤指示器的高度。
• disableAutoScroll: 布尔值，启用或禁用自动滚动。
• list: 提供要显示的步骤或阶段列表。
• onChange: 步骤变化时触发的回调函数。
• page: 当前步骤或页面。
• positiveCheck: 可选的自定义勾选标记小部件。
• positiveColor: 自定义活动步骤的颜色。
• negativeColor: 自定义非活动步骤的颜色。
• progressColor: 自定义进度指示器的颜色。
• durationScroller: 设置滚动动画的持续时间。
• durationCheckBulb: 设置勾选标记动画的持续时间。
• division: 指定渲染步骤的数量。

通过上述示例和参数说明，您可以根据需要自定义 FlutterStepIndicator 的外观和行为。更多详细信息和完整示例可以参考 GitHub 示例。