Flutter自定义页面步骤指示插件flutter_custom_page_steps_indication的使用

自定义页面步骤指示插件

flutter_custom_page_steps_indication 是一个用于在 Flutter 应用程序中显示分步进度的可定制化小部件。它为多步骤过程或表单提供了一个直观的界面。

特性

• 可定制的步骤指示器
• 动画的后退和继续按钮
• 结束按钮上的发光效果
• 用户可定义的颜色和按钮高度
• 响应式设计

安装

在你的项目的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  flutter_custom_page_steps_indication:

然后运行：

flutter pub get

使用

在你的 Dart 代码中导入该包：

import 'package:flutter_custom_page_steps_indication/flutter_custom_page_steps_indication.dart';

接下来，你可以在 Flutter 应用中使用 StepProgress 小部件：

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('自定义步骤指示')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: StepProgress(
          currentStep: 1,
          totalSteps: 3,
          onNext: () {
            // 继续按钮点击事件
          },
          onBack: () {
            // 后退按钮点击事件
          },
          activeColor: Colors.blue,
          inactiveColor: Colors.grey,
          backButtonColor: Colors.red,
          continueButtonColor: Colors.green,
          finishButtonColor: Colors.purple,
          buttonHeight: 50,
        ),
      ),
    );
  }
}

自定义配置

你可以自定义以下属性：

• currentStep: 当前步骤（从 0 开始）
• totalSteps: 总步骤数
• onNext: 点击“继续”按钮时的回调函数
• onBack: 点击“后退”按钮时的回调函数
• activeColor: 活动步骤指示器的颜色
• inactiveColor: 非活动步骤指示器的颜色
• backButtonColor: “后退”按钮的颜色
• continueButtonColor: “继续”按钮的颜色
• finishButtonColor: 最终步骤上“完成”按钮的颜色
• buttonHeight: 按钮的高度

示例代码

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

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

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

class MyWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('自定义步骤指示')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: StepProgress(
          currentStep: 1,
          totalSteps: 3,
          onNext: () {
            // 继续按钮点击事件
          },
          onBack: () {
            // 后退按钮点击事件
          },
          activeColor: Colors.blue,
          inactiveColor: Colors.grey,
          backButtonColor: Colors.red,
          continueButtonColor: Colors.green,
          finishButtonColor: Colors.purple,
          buttonHeight: 50,
        ),
      ),
    );
  }
}