Flutter步骤进度指示插件step_progress_indicator的使用

Step Progress Indicator 插件介绍

Step Progress Indicator 是一个开源的Flutter包，由Sandro Maglione开发，它提供了一系列可选和未选中的步骤来构成进度条。这个插件可以帮助开发者轻松地在应用中创建直观的进度指示器。

插件特性

• Horizontal and Vertical Indicators 支持水平和垂直两种方向的进度条。
• Customizable Steps 可以自定义每个步骤的颜色、大小等属性。
• Gradient Support 支持渐变色效果。
• Circular Indicators 提供圆形进度条选项。
• Interactive 用户可以点击进度条上的步骤触发事件。

安装与配置

在您的pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  step_progress_indicator: ^1.0.2

然后运行命令 flutter pub get 来安装此包。

示例代码

以下是完整的示例demo，展示了如何使用StepProgressIndicator和CircularStepProgressIndicator:

main.dart - 应用入口

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _bottomBarIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Step Progress Bar',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: SafeArea(
        child: Scaffold(
          appBar: AppBar(
            title: Text('Step Progress Indicator Demo'),
          ),
          body: _bottomBarIndex == 0 
              ? HorizontalBarExample() 
              : VerticalBarExample(),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: _bottomBarIndex,
            onTap: (index) => setState(() => _bottomBarIndex = index),
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.horizontal_split),
                label: 'Horizontal'
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.vertical_split),
                label: 'Vertical'
              ),
            ],
          ),
        ),
      ),
    );
  }
}

horizontal_bar_example.dart - 水平进度条示例

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

class HorizontalBarExample extends StatelessWidget {
  final List<String> steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"];

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Text("Horizontal Step Progress Indicator"),
        SizedBox(height: 20),
        StepProgressIndicator(
          totalSteps: steps.length,
          currentStep: 3, // 假设当前为第3步
          size: 30,
          padding: 8,
          selectedColor: Colors.blue,
          unselectedColor: Colors.grey,
          roundedEdges: Radius.circular(10),
          customStep: (int index, Color color, double width) {
            return Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: color,
              ),
              child: Center(
                child: Text(
                  "${index + 1}",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
        ),
        SizedBox(height: 20),
        ...steps.asMap().entries.map((entry) {
          return Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                CircleAvatar(
                  backgroundColor: entry.key < 3 ? Colors.blue : Colors.grey,
                  child: Text("${entry.key + 1}"),
                ),
                SizedBox(width: 10),
                Text(entry.value),
              ],
            ),
          );
        }).toList(),
      ],
    );
  }
}

vertical_bar_example.dart - 垂直进度条示例

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

class VerticalBarExample extends StatelessWidget {
  final List<String> steps = ["Step 1", "Step 2", "Step 3", "Step 4", "Step 5"];

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text("Vertical Step Progress Indicator"),
        SizedBox(height: 20),
        StepProgressIndicator(
          totalSteps: steps.length,
          currentStep: 3, // 假设当前为第3步
          direction: Axis.vertical,
          size: 30,
          padding: 8,
          selectedColor: Colors.green,
          unselectedColor: Colors.grey,
          roundedEdges: Radius.circular(10),
          customStep: (int index, Color color, double height) {
            return Container(
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: color,
              ),
              child: Center(
                child: Text(
                  "${index + 1}",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            );
          },
        ),
        SizedBox(height: 20),
        Expanded(
          child: ListView.builder(
            itemCount: steps.length,
            itemBuilder: (context, index) {
              return ListTile(
                leading: CircleAvatar(
                  backgroundColor: index < 3 ? Colors.green : Colors.grey,
                  child: Text("${index + 1}"),
                ),
                title: Text(steps[index]),
              );
            },
          ),
        ),
      ],
    );
  }
}

以上代码展示了如何在一个简单的Flutter应用程序中集成并使用step_progress_indicator插件。您可以根据需要调整参数来自定义进度条的外观和行为。希望这些信息对您有所帮助！