Flutter步骤进度管理插件step_progress的使用

Flutter步骤进度管理插件step_progress的使用

StepProgress

StepProgress 是一个轻量级的包，用于在用户界面中显示多步任务的步骤进度指示器。它提供了可自定义的小部件，以视觉方式表示任务的进度，使用户更容易理解他们当前的位置和剩余的步骤。

展示

step_progress_demo

安装

要使用 StepProgress，你需要将其添加到你的 pubspec.yaml 文件中：

dependencies:
  step_progress: latest_version

然后运行 flutter pub get 来安装该包。

使用

要在你的 Flutter 应用中使用 StepProgress，首先导入该包：

import 'package:step_progress/step_progress.dart';

初始化你的 StepProgressController

final _stepProgressController = StepProgressController(totalStep: 4);

然后将你的 StepProgressController 传递给 StepProgress 小部件并使用它

StepProgress(
  controller: _stepProgressController,
  style: const StepProgressStyle(
    strokeColor: Color(0xff04A7B8),
    valueColor: Colors.white,
    backgroundColor: Color(0xff04A7B5),
    tickColor: Color(0xff04A7B5),
  ),
  onStepChanged: (index) {
    debugPrint('on step changed: $index');
  },
),

支持该包

我们非常感谢你对 StepProgress 包的支持！你可以通过以下方式帮助我们：

  • 在 pub.dev 上点赞该包。
  • 在 GitHub 上为仓库打星。
  • 在这里报告你遇到的任何问题或错误 GitHub Issues。

你的贡献和反馈对我们非常重要！

许可证

StepProgress 在 BSD-3-Clause 许可证下发布。

联系我 📨

请随时通过以下平台联系我：

期待与你取得联系！

示例代码

示例文件结构

import 'package:example/example_one/example_one.dart';
import 'package:example/example_two/example_two.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FlutterStepProgressDemo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => const ExampleOne(),
                  ),
                );
              },
              child: const Text('Example One'),
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (_) => const ExampleTwo(),
                  ),
                );
              },
              child: const Text('Example Two'),
            ),
          ],
        ),
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何在Flutter中使用step_progress插件来管理步骤进度的代码示例。这个插件通常用于展示多步骤流程，比如用户注册流程、表单填写流程等。

首先，确保你的Flutter项目已经添加了step_progress依赖。在pubspec.yaml文件中添加以下依赖：

dependencies:
  flutter:
    sdk: flutter
  step_progress: ^1.0.0  # 请检查最新版本号并替换

然后运行flutter pub get来获取依赖。

接下来，在你的Dart文件中使用StepProgress组件。以下是一个简单的示例，展示如何使用StepProgress来管理一个包含三个步骤的流程：

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

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

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

class StepProgressDemo extends StatefulWidget {
  @override
  _StepProgressDemoState createState() => _StepProgressDemoState();
}

class _StepProgressDemoState extends State<StepProgressDemo> {
  int currentStep = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Step Progress Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            StepProgressIndicator(
              totalSteps: 3,
              currentStep: currentStep,
              size: 24.0,
              activeColor: Colors.blue,
              completedColor: Colors.green,
              inactiveColor: Colors.grey,
              stepPositions: StepPositions.CENTER,
              padding: 8.0,
              lineActiveColor: Colors.blue.withOpacity(0.3),
              lineCompletedColor: Colors.green.withOpacity(0.3),
              lineInactiveColor: Colors.grey.withOpacity(0.3),
              lineThickness: 4.0,
            ),
            SizedBox(height: 24),
            Text(
              'Current Step: $currentStep',
              style: TextStyle(fontSize: 18),
            ),
            SizedBox(height: 16),
            ElevatedButton(
              onPressed: currentStep > 1
                  ? () {
                      setState(() {
                        currentStep--;
                      });
                    }
                  : null,
              child: Text('Previous'),
            ),
            SizedBox(width: 16),
            ElevatedButton(
              onPressed: currentStep < 3
                  ? () {
                      setState(() {
                        currentStep++;
                      });
                    }
                  : null,
              child: Text('Next'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. StepProgressIndicator组件用于显示步骤进度。
  2. totalSteps属性定义了总步骤数。
  3. currentStep属性表示当前步骤。
  4. activeColor, completedColor, 和 inactiveColor分别定义了激活、完成和未激活步骤的颜色。
  5. lineActiveColor, lineCompletedColor, 和 lineInactiveColor分别定义了激活、完成和未激活步骤之间的线条颜色。
  6. ElevatedButton组件用于控制步骤的前进和后退。

这个示例展示了如何创建一个简单的步骤进度条，并允许用户通过按钮点击来前进或后退步骤。你可以根据实际需求进一步定制和扩展这个示例。

回到顶部