Flutter增强步骤导航插件enhance_stepper的使用

enhance_stepper

enhance_stepper 是一个易于实现并带有额外特性的Flutter插件，主要用于创建增强型的步骤导航组件。它提供了以下功能：

• 为Flutter中的Stepper添加替代标签。
• 改变步骤图标。

EnhanceStepper(
    stepIconSize: 30,
    type: _type,
    horizontalTitlePosition: HorizontalTitlePosition.bottom,
    horizontalLinePosition: HorizontalLinePosition.top,
    //...
);

Screenshots

Getting Started

本项目是一个Dart包的起点，作为可以在多个Flutter或Dart项目中轻松共享代码的库模块。

要开始使用Flutter，请参阅我们的 在线文档，其中包含教程、示例以及移动开发指南和完整的API参考。

Usage

要在你的项目中使用此包，需要在 pubspec.yaml 文件中添加 cupertino_stepper 作为依赖项。

Example

下面是一个完整的示例demo，展示了如何使用 enhance_stepper 插件来构建一个具有交互式步骤导航的应用程序。

import 'package:flutter/material.dart';
import 'package:tuple/tuple.dart'; // 导入Tuple包用于存储步骤信息
import 'package:enhance_stepper/enhance_stepper.dart'; // 导入enhance_stepper包

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        useMaterial3: false,
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {

  int groupValue = 0;
  
  StepperType _type = StepperType.vertical;

  List<Tuple2<IconData, StepState>> tuples = [
    Tuple2(Icons.directions_bike, StepState.indexed),
    Tuple2(Icons.directions_bus, StepState.editing),
    Tuple2(Icons.directions_railway, StepState.complete),
    Tuple2(Icons.directions_boat, StepState.disabled),
    Tuple2(Icons.directions_car, StepState.error),
  ];

  int _index = 0;

  void ddlog(String message) {
    print(message); // 简单的日志打印函数
  }

  void go(int index) {
    if (index == -1 && _index <= 0 ) {
      ddlog("it's first Step!");
      return;
    }

    if (index == 1 && _index >= tuples.length - 1) {
      ddlog("it's last Step!");
      return;
    }

    setState(() {
      _index += index;
    });
  }

  Widget buildStepperCustom(BuildContext context) {
    return EnhanceStepper(
        stepIconSize: 30,
        type: _type,
        horizontalTitlePosition: HorizontalTitlePosition.bottom,
        horizontalLinePosition: HorizontalLinePosition.top,
        currentStep: _index,
        physics: ClampingScrollPhysics(),
        steps: tuples.map((e) => EnhanceStep(
          icon: Icon(e.item1, color: Colors.blue, size: 30,),
          state: e.item2,
          isActive: _index == tuples.indexOf(e),
          title: Text("step ${tuples.indexOf(e)}"),
          subtitle: Text("${e.item2.toString().split(".").last}",),
          content: Text("Content for Step ${tuples.indexOf(e)}"),
        )).toList(),
        onStepCancel: () {
          go(-1);
        },
        onStepContinue: () {
          go(1);
        },
        onStepTapped: (index) {
          ddlog(index.toString());
          setState(() {
            _index = index;
          });
        },
        controlsBuilder: (BuildContext context, { VoidCallback? onStepContinue, VoidCallback? onStepCancel }){
          return Row(
            children: [
              SizedBox(height: 30,),
              ElevatedButton(
                onPressed: onStepContinue,
                child: Text("Next"),
              ),
              SizedBox(width: 8,),
              TextButton(
                onPressed: onStepCancel, 
                child: Text("Back"), 
              ),
            ],
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        actions: [
          TextButton(onPressed: (){
            ddlog("change");
            setState(() {
              _type = _type == StepperType.vertical ? StepperType.horizontal : StepperType.vertical;
            });
          }, child: Icon(Icons.change_circle_outlined, color: Colors.white,)),
        ],
      ),
      body: buildStepperCustom(context),
    );
  }
}

这个例子中，我们创建了一个包含5个步骤的步骤导航器，并且可以切换垂直和水平布局。每个步骤都有一个图标和状态（如：编辑中、已完成等），并且用户可以通过点击“Next”和“Back”按钮在步骤之间导航。此外，还可以通过点击应用栏上的图标来切换步骤导航器的布局方向。

希望这个例子能帮助你更好地理解和使用 enhance_stepper 插件！如果你有任何问题或需要进一步的帮助，请随时提问。