Flutter垂直步骤指示器插件vertical_steps_indicator的使用

Flutter垂直步骤指示器插件vertical_steps_indicator的使用

垂直步骤指示器组件

一个用于自定义步骤指示器的Flutter包,适用于在应用程序中可视化多步流程。

版本0.0.2的新特性

🚀 新功能

  • 动态步骤项:引入了StepItemModel以实现灵活的步骤定制。每个步骤现在可以包含:

    • 标题部件。
    • 最多两个子标题部件(subtitle1subtitle2)。
    • 自定义内容部件以适应不同的设计需求。
  • 自定义指示器

    • selectedIndicator:自定义当前步骤的指示器。
    • normalIndicator:覆盖非当前步骤的指示器外观。

🛠 改进

  • 指示器类型控制:添加了IndicatorType枚举以指定:

    • onlyCurrent:仅高亮当前步骤。
    • previous:高亮当前步骤及其所有前序步骤。
  • 动态步骤高度:添加了stepItemHeight以精确控制步骤项的高度。

✨ 增强

  • 步骤重构:更新了steps以使用List<StepItemModel>以提高灵活性。
  • 错误处理:如果在StepItemModel中既未提供title也未提供contents,则会抛出错误。

功能

  • 默认步骤指示器:简洁的指示器设计。
  • 虚线步骤指示器:现代风格的虚线样式。
  • 可定制颜色:轻松设置指示器、背景和边框的颜色。
  • 灵活布局:支持动态步骤和当前步骤的定制。

安装

pubspec.yaml文件中添加以下依赖:

dependencies:
  vertical_steps_indicator: ^0.0.2

然后运行:

flutter pub get

使用

以下是使用StepsIndicatorWidget的基本示例:

基本示例

基本示例

StepsIndicatorWidget(
  steps: [
    StepItemModel(title: Text('Step 1')),
    StepItemModel(title: Text('Step 2')),
    StepItemModel(contents: Text('Custom Step Content')),
  ],
  currentStep: 1,
)

虚线线段示例

虚线示例

StepsIndicatorWidget(
  steps: [
    StepItemModel(title: Text('Step 1')),
    StepItemModel(
        title: Text('Step 2'),
        subtitle1: Text('Subtitle to step 2')),
    StepItemModel(
        title: Text('Step 3'),
        subtitle1: Text('Subtitle to step 3'),
        subtitle2: Text('Subtitle 2 to step 3')),
  ],
  currentStep: 1,
  lineType: LineType.dashed,
  indicatorType: IndicatorType.previous,
),

高级示例

高级示例

StepsIndicatorWidget(
  steps: [
    StepItemModel(title: Text('Step 1'), subtitle1: Text('Start Here')),
    StepItemModel(title: Text('Step 2'), subtitle1: Text('In Progress')),
    StepItemModel(contents: Text('Final Step Content')),
  ],
  currentStep: 2,
  indicatorType: IndicatorType.onlyCurrent,
  lineType: LineType.dashed,
  indicatorColor: Colors.teal,
  backgroundColor: Colors.pink.shade100,
  borderColor: Colors.teal.shade200,
  selectedIndicator: Icon(Icons.check_circle, color: Colors.green),
  normalIndicator: Icon(Icons.circle_outlined, color: Colors.grey),
)

更多关于Flutter垂直步骤指示器插件vertical_steps_indicator的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter垂直步骤指示器插件vertical_steps_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是如何在Flutter中使用vertical_steps_indicator插件的一个示例。这个插件可以帮助你创建一个垂直的步骤指示器,通常用于显示多步骤流程中的当前步骤。

首先,你需要在你的pubspec.yaml文件中添加该插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  vertical_steps_indicator: ^最新版本号  # 请替换为最新版本号

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

接下来是一个完整的示例代码,展示了如何使用vertical_steps_indicator插件:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Vertical Steps Indicator Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Vertical Steps Indicator Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            Expanded(
              child: VerticalStepsIndicator(
                steps: [
                  StepInfo(
                    title: 'Step 1',
                    content: 'This is the first step',
                  ),
                  StepInfo(
                    title: 'Step 2',
                    content: 'This is the second step',
                  ),
                  StepInfo(
                    title: 'Step 3',
                    content: 'This is the third step',
                  ),
                ],
                currentStep: currentStep,
                onStepTapped: (index) {
                  setState(() {
                    currentStep = index;
                  });
                },
                stepDone: [false, false, false], // 标记哪些步骤已完成
                stepActiveColor: Colors.blue,
                stepInactiveColor: Colors.grey,
                stepDoneColor: Colors.green,
                stepConnectorColor: Colors.grey.withOpacity(0.5),
                stepConnectorActiveColor: Colors.blue,
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (currentStep < 2) {
                  setState(() {
                    currentStep += 1;
                    // 假设完成当前步骤,将其标记为已完成
                    // 你可以根据业务逻辑动态更新 stepDone 数组
                    List<bool> stepDone = List.from(state.stepDone);
                    stepDone[currentStep - 1] = true;
                    // 这里只是示例,实际上你需要一个更好的状态管理方式来更新 stepDone
                  });
                } else {
                  // 最后一步的处理逻辑
                }
              },
              child: Text('Next Step'),
            ),
          ],
        ),
      ),
    );
  }
}

// 假设的 StepInfo 类(实际使用时,根据插件提供的 API 修改)
class StepInfo {
  String title;
  String content;

  StepInfo({required this.title, required this.content});
}

// 注意:上面的 StepInfo 类是假设的,因为 vertical_steps_indicator 插件可能
// 有自己的数据模型。你需要根据插件的实际 API 文档来调整这部分代码。
// 另外,由于我无法直接访问到 vertical_steps_indicator 插件的源码和文档,
// 因此上述代码中的某些属性(如 stepDone)可能需要以不同的方式处理。
// 请查阅插件的官方文档以获取正确的用法。

请注意,上面的StepInfo类是根据假设创建的,因为vertical_steps_indicator插件可能有自己的数据模型。你需要根据插件的实际API文档来调整这部分代码。另外,由于我无法直接访问到vertical_steps_indicator插件的源码和文档,因此某些属性(如stepDone)可能需要以不同的方式处理。

在实际使用时,请查阅插件的官方文档和示例代码,以确保正确使用。

回到顶部