Flutter步进器控制插件smart_stepper的使用

特性

这个插件帮助你创建一个漂亮的自定义步进器。

预览

使用示例

以下是一个完整的示例，展示了如何在Flutter应用中使用smart_stepper插件。

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

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

  [@override](/user/override)
  State<SmartStepperExample> createState() => _SmartStepperExampleState();
}

class _SmartStepperExampleState extends State<SmartStepperExample> {
  int currentStep = 3; // 当前步骤
  int totalSteps = 4; // 总步骤数
  int currentStep1 = 2; // 第二个步进器的当前步骤
  int currentStep2 = 1; // 第三个步进器的当前步骤

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.blue,
        title: const Text(
          "Smart Stepper Example",
          style: TextStyle(color: Colors.white),
        ),
      ),
      body: Column(
        children: [
          const SizedBox(height: 12),
          const Text(
            "Example",
            style: TextStyle(color: Colors.black, fontSize: 22),
          ),
          SmartStepper(
            currentStep: currentStep, // 当前步骤
            totalSteps: totalSteps, // 总步骤数
            onStepperTap: (value) {
              setState(() {
                currentStep = value; // 更新当前步骤
              });
            },
          ),
          const SizedBox(height: 24),
          const Text(
            "Example - 1",
            style: TextStyle(color: Colors.black, fontSize: 22),
          ),
          SmartStepper(
            currentStep: currentStep1,
            totalSteps: totalSteps,
            completeStepColor: Colors.orange, // 完成步骤的颜色
            currentStepColor: Colors.red, // 当前步骤的颜色
            inactiveStepColor: Colors.purple, // 未完成步骤的颜色
            borderWidth: 0, // 边框宽度
            onStepperTap: (value) {
              setState(() {
                currentStep1 = value; // 更新当前步骤
              });
            },
          ),
          const SizedBox(height: 24),
          const Text(
            "Example - 2",
            style: TextStyle(color: Colors.black, fontSize: 22),
          ),
          SmartStepper(
            currentStep: currentStep2,
            totalSteps: totalSteps,
            isTextShowing: false, // 是否显示文字
            borderWidth: 0,
            onStepperTap: (value) {
              setState(() {
                currentStep2 = value; // 更新当前步骤
              });
            },
          ),
          const SizedBox(height: 24),
          const Text(
            "Example - 3",
            style: TextStyle(color: Colors.black, fontSize: 22),
          ),
          SmartStepper(
            currentStep: currentStep1,
            totalSteps: totalSteps,
            completeStepColor: Colors.orange,
            currentStepColor: Colors.red,
            inactiveStepColor: Colors.purple,
            completeBorderColor: Colors.yellow, // 完成边框颜色
            currentBorderColor: Colors.green, // 当前边框颜色
            inactiveBorderColor: Colors.cyan, // 未完成边框颜色
            borderWidth: 2, // 边框宽度
            onStepperTap: (value) {
              setState(() {
                currentStep1 = value; // 更新当前步骤
              });
            },
          ),
          const SizedBox(height: 24),
          const Text(
            "Example - 4",
            style: TextStyle(color: Colors.black, fontSize: 22),
          ),
          SmartStepper(
            currentStep: currentStep2,
            totalSteps: totalSteps,
            completeTextColor: Colors.black, // 完成文本颜色
            currentTextColor: Colors.red, // 当前文本颜色
            inactiveTextColor: Colors.blue, // 未完成文本颜色
            borderWidth: 2,
            onStepperTap: (value) {
              setState(() {
                currentStep2 = value; // 更新当前步骤
              });
            },
          ),
          const SizedBox(height: 24),
          const Text(
            "Example - 5",
            style: TextStyle(color: Colors.black, fontSize: 22),
          ),
          SmartStepper(
            currentStep: currentStep,
            totalSteps: totalSteps,
            completeLineColor: Colors.black, // 完成线条颜色
            currentLineColor: Colors.red, // 当前线条颜色
            inactiveLineColor: Colors.blue, // 未完成线条颜色
            lineHeight: 10, // 线条高度
            lineWidth: 50, // 线条宽度
            lineBorderRadius: 12, // 线条圆角半径
            linePadding: const EdgeInsets.symmetric(horizontal: 12), // 线条内边距
            onStepperTap: (value) {
              setState(() {
                currentStep = value; // 更新当前步骤
              });
            },
          ),
          const SizedBox(height: 12),
          const Text(
            "Example - 6",
            style: TextStyle(color: Colors.black, fontSize: 22),
          ),
          SmartStepper(
            currentStep: currentStep1,
            totalSteps: totalSteps,
            stepWidth: 48, // 步骤宽度
            stepHeight: 48, // 步骤高度
            completeStepColor: Colors.orange,
            currentStepColor: Colors.red,
            inactiveStepColor: Colors.purple,
            onStepperTap: (value) {
              setState(() {
                currentStep1 = value; // 更新当前步骤
              });
            },
          ),
        ],
      ),
    );
  }
}