Flutter步进器插件another_stepper的使用

another_stepper 是一个Flutter包，用于创建可高度自定义的水平和垂直步进器。本文将详细介绍如何使用该插件，并提供完整的示例代码。

Getting started

添加依赖

在 pubspec.yaml 文件的 dependencies 部分添加以下内容：

dependencies:
  another_stepper: <latest_version>

请确保用最新版本号替换 <latest_version>。

导入包

在你的Dart文件中导入 another_stepper 包：

import 'package:another_stepper/another_stepper.dart';

示例 AnotherStepper

下面是一个完整的示例，展示了如何使用 AnotherStepper 创建一个步进器。

Dummy StepperData

首先，我们定义一些示例数据：

List<StepperData> stepperData = [
  StepperData(
      title: StepperText(
        "Order Placed",
        textStyle: const TextStyle(
          color: Colors.grey,
        ),
      ),
      subtitle: StepperText("Your order has been placed"),
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_one, color: Colors.white),
      )),
  StepperData(
      title: StepperText("Preparing"),
      subtitle: StepperText("Your order is being prepared"),
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_two, color: Colors.white),
      )),
  StepperData(
      title: StepperText("On the way"),
      subtitle: StepperText(
          "Our delivery executive is on the way to deliver your item"),
      iconWidget: Container(
        padding: const EdgeInsets.all(8),
        decoration: const BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.all(Radius.circular(30))),
        child: const Icon(Icons.looks_3, color: Colors.white),
      )),
  StepperData(
    title: StepperText("Delivered",
        textStyle: const TextStyle(color: Colors.grey)),
    iconWidget: Container(
      padding: const EdgeInsets.all(8),
      decoration: const BoxDecoration(
          color: Colors.redAccent,
          borderRadius: BorderRadius.all(Radius.circular(30))),
    ),
  ),
];

创建步进器

接下来，我们将这些数据用于创建一个步进器：

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

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<StepperData> stepperData = [
    StepperData(
        title: StepperText(
          "Order Placed",
          textStyle: const TextStyle(
            color: Colors.grey,
          ),
        ),
        subtitle: StepperText("Your order has been placed"),
        iconWidget: Container(
          padding: const EdgeInsets.all(8),
          decoration: const BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(Radius.circular(30))),
          child: const Icon(Icons.looks_one, color: Colors.white),
        )),
    StepperData(
        title: StepperText("Preparing"),
        subtitle: StepperText("Your order is being prepared"),
        iconWidget: Container(
          padding: const EdgeInsets.all(8),
          decoration: const BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(Radius.circular(30))),
          child: const Icon(Icons.looks_two, color: Colors.white),
        )),
    StepperData(
        title: StepperText("On the way"),
        subtitle: StepperText(
            "Our delivery executive is on the way to deliver your item"),
        iconWidget: Container(
          padding: const EdgeInsets.all(8),
          decoration: const BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(Radius.circular(30))),
          child: const Icon(Icons.looks_3, color: Colors.white),
        )),
    StepperData(
        title: StepperText("Delivered",
            textStyle: const TextStyle(color: Colors.grey)),
        iconWidget: Container(
          padding: const EdgeInsets.all(8),
          decoration: const BoxDecoration(
              color: Colors.redAccent,
              borderRadius: BorderRadius.all(Radius.circular(30))),
        )),
  ];

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 20, left: 20),
              child: AnotherStepper(
                stepperList: stepperData,
                stepperDirection: Axis.horizontal,
                iconWidth: 40,
                iconHeight: 40,
                activeBarColor: Colors.green,
                inActiveBarColor: Colors.grey,
                inverted: true,
                verticalGap: 30,
                activeIndex: 1,
                barThickness: 8,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

自定义配置

你可以通过修改参数来自定义步进器的外观和行为。例如：

Horizontal(Default)

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  iconWidth: 40,
  iconHeight: 40,
)

Vertical(Default)

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  iconWidth: 40,
  iconHeight: 40,
)

Horizontal Inverted

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  inverted: true,
)

Vertical Inverted

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  inverted: true,
)

Active index

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  activeIndex: 2,
)

Vertical Gap

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  activeIndex: 2,
  gap: 60,
)

Horizontal Gap

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.horizontal,
  activeIndex: 2,
  gap: 60,
)

Bar Thickness

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  activeIndex: 2,
  barThickness: 8,
)

Custom Dot and Bar

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  dotWidget: Container(
    padding: EdgeInsets.all(8),
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.all(Radius.circular(30))
    ),
    child: Icon(Icons.navigate_next_sharp, color: Colors.white),
  ),
  activeBarColor: Colors.red,
  inActiveBarColor: Colors.grey,
  activeIndex: 1,
)

Custom Dot, Bar, Dot thickness and long text

AnotherStepper(
  stepperList: stepperData,
  stepperDirection: Axis.vertical,
  dotWidget: Container(
    padding: EdgeInsets.all(8),
    decoration: BoxDecoration(
      color: Colors.red,
      borderRadius: BorderRadius.all(Radius.circular(30))
    ),
    child: Icon(Icons.fastfood, color: Colors.white),
  ),
  activeBarColor: Colors.red,
  inActiveBarColor: Colors.grey,
  activeIndex: 2,
  barThickness: 8,
)

通过这些配置，你可以轻松地创建出符合需求的步进器。希望这个指南对你有所帮助！

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

itying888 1楼•2 天前

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

当然，下面是一个关于如何在Flutter项目中使用another_stepper插件的示例代码。这个插件允许你创建一个步进器（Stepper），让用户逐步完成一系列任务。

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

dependencies:
  flutter:
    sdk: flutter
  another_stepper: ^x.y.z  # 请替换为最新版本号

然后运行flutter pub get来安装插件。

接下来是一个完整的示例代码，展示了如何使用another_stepper插件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Stepper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Stepper Demo'),
        ),
        body: MyStepper(),
      ),
    );
  }
}

class MyStepper extends StatefulWidget {
  @override
  _MyStepperState createState() => _MyStepperState();
}

class _MyStepperState extends State<MyStepper> {
  final List<Step> steps = [
    Step(
      title: Text('Step 1: Personal info'),
      content: Column(
        children: [
          TextField(
            decoration: InputDecoration(labelText: 'First Name'),
          ),
          TextField(
            decoration: InputDecoration(labelText: 'Last Name'),
          ),
        ],
      ),
    ),
    Step(
      title: Text('Step 2: Contact info'),
      content: Column(
        children: [
          TextField(
            decoration: InputDecoration(labelText: 'Email'),
            keyboardType: TextInputType.emailAddress,
          ),
          TextField(
            decoration: InputDecoration(labelText: 'Phone Number'),
            keyboardType: TextInputType.phone,
          ),
        ],
      ),
    ),
    Step(
      title: Text('Step 3: Confirm'),
      content: Column(
        children: [
          Text('Review your information and confirm.'),
        ],
      ),
    ),
  ];

  int currentStep = 0;

  void _handleNext() {
    setState(() {
      if (currentStep < steps.length - 1) {
        currentStep = currentStep + 1;
      }
    });
  }

  void _handlePrevious() {
    setState(() {
      if (currentStep > 0) {
        currentStep = currentStep - 1;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      child: AnotherStepper(
        steps: steps,
        currentStep: currentStep,
        onStepTapped: (index) {
          setState(() {
            currentStep = index;
          });
        },
        onStepContinue: _handleNext,
        onStepCancel: () {
          // Handle step cancellation if needed
          print('Step cancelled');
        },
        onStepFinish: () {
          // Handle step finish if needed
          print('Step finished');
          // Optionally reset the stepper or move to another screen
        },
        type: StepperType.horizontal, // or StepperType.vertical
      ),
    );
  }
}

解释

依赖添加：在pubspec.yaml文件中添加another_stepper依赖。
主应用：MyApp类定义了应用的基本结构和主题。
步进器状态管理：MyStepper是一个有状态的组件，用于管理步进器的状态。
步骤定义：在_MyStepperState类中定义了一个步骤列表steps，每个步骤包含一个标题和内容。
步骤控制：通过_handleNext和_handlePrevious方法控制步骤的前进和后退。
步进器渲染：使用AnotherStepper组件渲染步进器，并绑定相关事件处理函数。

这个示例展示了如何使用another_stepper插件来创建一个简单的步进器，用户可以在其中逐步输入个人信息、联系信息等。你可以根据需要自定义步骤内容和样式。