Flutter状态步进器插件status_stepper的使用

使用此插件来展示状态变化。目前仅支持从左到右的动画。

快速参考

属性	功能
animationDuration	动画时长，每个步骤项的持续时间，乘以2（用于动画连接线和项目），再乘以n（n为要动画的子项数量）
animationDelayDuration	动画开始前的延迟时间
currentIndex	当前状态索引，-1表示没有活动项
lastActiveIndex	动画从该位置的子项开始
activeColor	活动和已完成状态的颜色，默认为主题颜色 `Theme.of(context).primaryColor`
disabledColor	下一个状态的颜色，默认为主题颜色 `Theme.of(context).colorScheme.secondaryVariant`
connectorCurve	连接线的动画曲线
itemCurve	状态项目的动画曲线
connectorThickness	连接线的厚度

示例

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '状态步进器示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: '状态步进器示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 生成4个状态项
  final statuses = List.generate(
    4,
    (index) => SizedBox.square(
      dimension: 32,
      child: Center(child: Text('$index')),
    ),
  );

  int curIndex = -1; // 当前索引
  int lastIndex = -1; // 上一个索引

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: StatusStepper(
                connectorCurve: Curves.easeIn, // 连接线动画曲线
                itemCurve: Curves.easeOut, // 状态项动画曲线
                activeColor: Colors.amber, // 活动状态颜色
                disabledColor: Colors.grey, // 非活动状态颜色
                animationDuration: const Duration(milliseconds: 500), // 动画时长
                children: statuses, // 状态项列表
                lastActiveIndex: lastIndex, // 上一个活动状态索引
                currentIndex: curIndex, // 当前活动状态索引
                connectorThickness: 6, // 连接线厚度
              ),
            ),
            ElevatedButton(
              onPressed: () {
                setState(() {
                  curIndex = -1; // 重置当前索引
                  lastIndex = -1; // 重置上一个索引
                });
              },
              child: const Text('重置'),
            ),
            Expanded(
              child: ListView.builder(
                itemCount: statuses.length,
                itemBuilder: (context, index) => ElevatedButton(
                  onPressed: index > curIndex
                      ? () {
                          setState(() {
                            lastIndex = curIndex; // 更新上一个索引
                            curIndex = index; // 更新当前索引
                          });
                        }
                      : null,
                  child: Text('$index'), // 显示状态项的数字
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

更多关于Flutter状态步进器插件status_stepper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

wuwangju 1楼作者

更多关于Flutter状态步进器插件status_stepper的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

status_stepper 是一个用于 Flutter 的状态步进器插件，它允许你创建具有多个步骤的进度指示器，并且可以根据应用程序的状态动态更新这些步骤的状态。这个插件非常适合用于向导、表单提交、订单跟踪等场景。

安装

首先，你需要在 pubspec.yaml 文件中添加 status_stepper 依赖：

dependencies:
  flutter:
    sdk: flutter
  status_stepper: ^1.0.0  # 请检查最新版本

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

使用示例

下面是一个简单的示例，展示了如何使用 status_stepper 插件来创建一个状态步进器：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: StatusStepperExample(),
    );
  }
}

class StatusStepperExample extends StatefulWidget {
  [@override](/user/override)
  _StatusStepperExampleState createState() => _StatusStepperExampleState();
}

class _StatusStepperExampleState extends State<StatusStepperExample> {
  int _currentStep = 0;

  List<StatusStepperItem> _steps = [
    StatusStepperItem(
      label: 'Step 1',
      status: StatusStepperStatus.completed,
    ),
    StatusStepperItem(
      label: 'Step 2',
      status: StatusStepperStatus.inProgress,
    ),
    StatusStepperItem(
      label: 'Step 3',
      status: StatusStepperStatus.pending,
    ),
  ];

  void _nextStep() {
    setState(() {
      if (_currentStep < _steps.length - 1) {
        _currentStep++;
        _steps[_currentStep].status = StatusStepperStatus.inProgress;
        if (_currentStep > 0) {
          _steps[_currentStep - 1].status = StatusStepperStatus.completed;
        }
      }
    });
  }

  void _previousStep() {
    setState(() {
      if (_currentStep > 0) {
        _steps[_currentStep].status = StatusStepperStatus.pending;
        _currentStep--;
        _steps[_currentStep].status = StatusStepperStatus.inProgress;
      }
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Status Stepper Example'),
      ),
      body: Column(
        children: [
          StatusStepper(
            steps: _steps,
            currentStep: _currentStep,
            direction: Axis.horizontal,
            lineThickness: 2.0,
            activeColor: Colors.blue,
            completedColor: Colors.green,
            pendingColor: Colors.grey,
          ),
          SizedBox(height: 20),
          Text('Current Step: ${_currentStep + 1}'),
          SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              ElevatedButton(
                onPressed: _previousStep,
                child: Text('Previous'),
              ),
              ElevatedButton(
                onPressed: _nextStep,
                child: Text('Next'),
              ),
            ],
          ),
        ],
      ),
    );
  }
}