Flutter垂直进度步进器插件vertical_progress_stepper的使用

Flutter 垂直进度步进器插件 vertical_progress_stepper 的使用

概述

vertical_progress_stepper 是一个可定制的 Flutter 垂直进度步进器小部件。此插件提供了一个易于使用的垂直进度条界面，可以应用于任何 Flutter 项目。它允许用户在一个垂直布局中查看他们的步骤进度。

特性

  • 自定义步骤：您可以为您的过程定义任意数量的步骤。
  • 交互式步骤：用户可以通过点击来导航步骤。
  • 自定义颜色：可以自定义激活和未激活步骤的颜色。
  • 灵活的内容：支持每个步骤的自定义内容。
  • 可选动画：可以选择为步骤过渡添加动画效果。

安装

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

dependencies:
  vertical_progress_stepper: ^0.0.1

示例代码

该包允许您轻松地将 VerticalProgressStepper 小部件集成到您的应用中。以下是如何使用它的示例：

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

void main() {
  runApp(const MaterialApp(home: VerticalProgressStepperMain()));
}

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

  [@override](/user/override)
  State<VerticalProgressStepperMain> createState() => _VerticalProgressStepperMainState();
}

class _VerticalProgressStepperMainState extends State<VerticalProgressStepperMain> {
  int currentStep = 2; // 设置此值以使步骤处于激活状态

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("自定义垂直进度步进器")),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: VerticalProgressStepper(
          currentStep: currentStep,
          steps: const [
            "提交实验室测试",
            "处理实验室测试",
            "临床医生审查",
            "整体教练审查",
            "结果准备完成",
          ],
          stepContent: const [
            Text("请上传您的实验室测试文件或图像以开始分析过程。"),
            Text("我们的医疗团队将在您提交实验室测试后开始分析您的结果。"),
            Text.rich(TextSpan(text: "分析完成后，", children: [
              TextSpan(text: "一名临床医生", style: TextStyle(fontWeight: FontWeight.bold)),
              TextSpan(text: "将在一周内审查您的结果。"),
            ])),
            Text("在临床医生审查之后，您的整体教练将提供个性化的建议。"),
            Icon(Icons.check_circle, color: Colors.green, size: 32),
          ],
          activeColor: Colors.deepPurple,
          inactiveColor: Colors.grey,
          onStepTapped: (index) {
            setState(() {
              currentStep = index;
            });
          },
        ),
      ),
    );
  }
}

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

1 回复

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


vertical_progress_stepper 是一个用于 Flutter 的插件，用于显示垂直方向的进度步进器。它可以帮助你在应用中展示多个步骤的进度，通常用于表单流程、订单跟踪、教程步骤等场景。

安装插件

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

dependencies:
  flutter:
    sdk: flutter
  vertical_progress_stepper: ^1.0.0  # 请使用最新版本

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

基本用法

以下是一个简单的示例，展示如何使用 vertical_progress_stepper 插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Vertical Progress Stepper'),
        ),
        body: VerticalProgressStepper(
          steps: [
            Step(
              title: Text('Step 1'),
              content: Text('This is the first step.'),
              isActive: true,
            ),
            Step(
              title: Text('Step 2'),
              content: Text('This is the second step.'),
              isActive: false,
            ),
            Step(
              title: Text('Step 3'),
              content: Text('This is the third step.'),
              isActive: false,
            ),
          ],
        ),
      ),
    );
  }
}
回到顶部