Flutter进度管理插件progress_stepper的使用

progress_stepper

此包可用于创建自定义的进度条。通过该插件，你可以轻松地在Flutter应用中实现不同风格和功能的进度条。

主要类

使用方法

方法1：默认配置

只需要初始化ProgressStepper并设置必要的参数，它将创建一个默认样式的进度条（带有箭头样式）。

ProgressStepper(
   width: 300,
   currentStep: 1,
)

钝头两端进度条

ProgressStepper(
   width: 300,
   height: 20,
   padding: 1,
   currentStep: 1,
   bluntHead: true,
   bluntTail: true,
   color: Colors.grey,
   progressColor: Colors.deepPurple,
   labels: const <String>['A', 'B', 'C', 'D', 'E'],
   defaultTextStyle: const TextStyle(
      color: Colors.purple,
      fontWeight: FontWeight.w500,
   ),
   selectedTextStyle: const TextStyle(
      color: Colors.white,
      fontWeight: FontWeight.bold,
   ),         
)

方法2：自定义构建器

可以使用构建器来返回自己的自定义步骤或根据需要使用提供的步骤。

ProgressStepper(
   width: 200,
   height: 25,
   stepCount: 3,
   builder: (int index, double widthOfStep) {
      if (index == 1) {
         return ProgressStepWithArrow(
            width: widthOfStep,
            height: 25,
            defaultColor: Colors.red,
            progressColor: Colors.green,
            borderWidth: 1,
            wasCompleted: true,
            child: Center(
               child: Text(
                  index.toString(),
                  style: const TextStyle(
                     color: Colors.white,
                  ),
               ),
            ),
         );
      }
      return ProgressStepWithChevron(
         width: widthOfStep,
         height: 25,
         defaultColor: Colors.red,
         progressColor: Colors.green,
         borderWidth: 1,
         wasCompleted: false,
         child: Center(
            child: Text(
               index.toString(),
               textAlign: TextAlign.center,
               style: const TextStyle(
                  color: Colors.white,
               ),
            ),
         ),
      );
   },
)

示例Demo

下面是一个完整的示例代码，演示了如何在Flutter项目中使用progress_stepper插件。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp(
        title: 'Progress Stepper Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: const MyHomePage(title: 'Progress Stepper'),
      );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              // Chevron Stepper
              ProgressStepper(
                width: 300,
                currentStep: 1,
              ),
              Divider(),
              SizedBox(height: 10),

              // Custom Stepper with Arrow and Chevron
              ProgressStepper(
                width: 200,
                height: 25,
                stepCount: 3,
                builder: (int index, double widthOfStep) {
                  if (index == 1) {
                    return ProgressStepWithArrow(
                      width: widthOfStep,
                      height: 25,
                      defaultColor: Colors.red,
                      progressColor: Colors.green,
                      borderWidth: 1,
                      wasCompleted: true,
                      child: Center(
                        child: Text(
                          index.toString(),
                          style: const TextStyle(color: Colors.white),
                        ),
                      ),
                    );
                  }
                  return ProgressStepWithChevron(
                    width: widthOfStep,
                    height: 25,
                    defaultColor: Colors.red,
                    progressColor: Colors.green,
                    borderWidth: 1,
                    wasCompleted: false,
                    child: Center(
                      child: Text(
                        index.toString(),
                        textAlign: TextAlign.center,
                        style: const TextStyle(color: Colors.white),
                      ),
                    ),
                  );
                },
              ),
              Divider(),
              SizedBox(height: 10),

              // Blunt Stepper
              ProgressStepper(
                width: 300,
                height: 20,
                padding: 1,
                currentStep: 1,
                bluntHead: true,
                bluntTail: true,
                color: Colors.grey,
                progressColor: Colors.deepPurple,
                labels: const <String>['A', 'B', 'C', 'D', 'E'],
                defaultTextStyle: const TextStyle(
                  color: Colors.purple,
                  fontWeight: FontWeight.w500,
                ),
                selectedTextStyle: const TextStyle(
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ],
          ),
        ),
      );
}

以上代码展示了三种不同类型的进度条，包括默认箭头样式、自定义构建器以及钝头两端的进度条。你可以根据实际需求调整这些配置以适应你的应用界面。