Flutter步进器插件easy_stepper的使用

发布于 1周前 作者 vueper 来自 Flutter

Flutter步进器插件easy_stepper的使用

关于

Easy Stepper

easy_stepper是一个完全可定制、美观且易于使用的步进器组件，具有不同的变化形式。

描述

步进器组件可以帮助您以有序的方式显示或收集用户信息。

安装

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

dependencies:
  easy_stepper: <latest_version>

在您的库中添加以下导入：

import 'package:easy_stepper/easy_stepper.dart';

使用方法

  1. 导入package:easy_stepper/easy_stepper.dart。
  2. 重要：direction参数控制步进器是水平还是垂直显示。水平步进器可以直接包裹在Column中。如果包裹在Row中，则必须同时包裹在内置的Expanded小部件中。垂直步进器也是如此。
  3. 验证：要启用在进入下一步之前进行验证，请在StatefulWidget中将steppingEnabled属性设置为适当的值。
  4. 控制步进器：所有步进器都通过activeStep属性进行控制。可以通过点击单个步骤来控制步进器。
  5. 要自定义颜色、边框等，可以将步进器小部件包裹在一个Container中，并指定其decoration属性。

特性

简单易用的图标步进器组件，每个图标定义一个步骤。因此，图标的总数代表可用步骤的总数。

示例代码

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

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Easy Stepper Example')),
        body: Column(
          children: [
            EasyStepper(
              activeStep: activeStep,
              lineLength: 70,
              lineSpace: 0,
              lineType: LineType.normal,
              defaultLineColor: Colors.white,
              finishedLineColor: Colors.orange,
              activeStepTextColor: Colors.black87,
              finishedStepTextColor: Colors.black87,
              internalPadding: 0,
              showLoadingAnimation: false,
              stepRadius: 8,
              showStepBorder: false,
              lineDotRadius: 1.5,
              steps: [
                EasyStep(
                  customStep: CircleAvatar(
                    radius: 8,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 7,
                      backgroundColor: activeStep >= 0 ? Colors.orange : Colors.white,
                    ),
                  ),
                  title: 'Waiting',
                ),
                EasyStep(
                  customStep: CircleAvatar(
                    radius: 8,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 7,
                      backgroundColor: activeStep >= 1 ? Colors.orange : Colors.white,
                    ),
                  ),
                  title: 'Order Received',
                  topTitle: true,
                ),
                EasyStep(
                  customStep: CircleAvatar(
                    radius: 8,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 7,
                      backgroundColor: activeStep >= 2 ? Colors.orange : Colors.white,
                    ),
                  ),
                  title: 'Preparing',
                ),
                EasyStep(
                  customStep: CircleAvatar(
                    radius: 8,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 7,
                      backgroundColor: activeStep >= 3 ? Colors.orange : Colors.white,
                    ),
                  ),
                  title: 'On Way',
                  topTitle: true,
                ),
                EasyStep(
                  customStep: CircleAvatar(
                    radius: 8,
                    backgroundColor: Colors.white,
                    child: CircleAvatar(
                      radius: 7,
                      backgroundColor: activeStep >= 4 ? Colors.orange : Colors.white,
                    ),
                  ),
                  title: 'Delivered',
                ),
              ],
              onStepReached: (index) => setState(() => activeStep = index),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                if (activeStep < 4) {
                  setState(() => activeStep++);
                }
              },
              child: Text('Next Step'),
            ),
          ],
        ),
      ),
    );
  }
}

此示例展示了如何创建一个简单的步进器，并允许用户通过点击按钮前进到下一步。您可以根据需要调整步进器的样式和行为。

自定义步进器

您可以使用图像、图标或其他自定义小部件来自定义步进器。例如：

EasyStepper(
  activeStep: activeStep,
  lineLength: 50,
  stepShape: StepShape.rRectangle,
  stepBorderRadius: 15,
  borderThickness: 2,
  padding: 20,
  stepRadius: 28,
  finishedStepBorderColor: Colors.deepOrange,
  finishedStepTextColor: Colors.deepOrange,
  finishedStepBackgroundColor: Colors.deepOrange,
  activeStepIconColor: Colors.deepOrange,
  showLoadingAnimation: false,
  steps: [
    EasyStep(
      customStep: ClipRRect(
        borderRadius: BorderRadius.circular(15),
        child: Opacity(
          opacity: activeStep >= 0 ? 1 : 0.3,
          child: Image.asset('assets/1.png'),
        ),
      ),
      customTitle: const Text(
        'Dash 1',
        textAlign: TextAlign.center,
      ),
    ),
    // 添加更多步骤...
  ],
  onStepReached: (index) => setState(() => activeStep = index),
),

水平步进器

水平步进器可以包含标题、线条文本、圆角矩形边框等特性。例如：

EasyStepper(
  activeStep: activeStep,
  lineStyle: const LineStyle(
    lineLength: 50,
    lineType: LineType.normal,
    lineThickness: 3,
    lineSpace: 1,
    lineWidth: 10,
    unreachedLineType: LineType.dashed,
  ),
  stepShape: StepShape.rRectangle,
  stepBorderRadius: 15,
  borderThickness: 2,
  internalPadding: 10,
  padding: const EdgeInsetsDirectional.symmetric(
    horizontal: 30,
    vertical: 20,
  ),
  stepRadius: 28,
  finishedStepBorderColor: Colors.deepOrange,
  finishedStepTextColor: Colors.deepOrange,
  finishedStepBackgroundColor: Colors.deepOrange,
  activeStepIconColor: Colors.deepOrange,
  showLoadingAnimation: false,
  steps: [
    EasyStep(
      customStep: ClipRRect(
        borderRadius: BorderRadius.circular(15),
        child: Opacity(
          opacity: activeStep >= 0 ? 1 : 0.3,
          child: Image.asset('assets/1.png'),
        ),
      ),
      customTitle: const Text(
        'Dash 1',
        textAlign: TextAlign.center,
      ),
    ),
    // 添加更多步骤...
  ],
  onStepReached: (index) => setState(() => activeStep = index),
),

垂直步进器

垂直步进器同样支持多种样式和配置。例如：

EasyStepper(
  activeStep: activeStep,
  lineStyle: const LineStyle(
    lineLength: 80,
    lineThickness: 1,
    lineSpace: 5,
  ),
  stepRadius: 20,
  unreachedStepIconColor: Colors.black87,
  unreachedStepBorderColor: Colors.black54,
  unreachedStepTextColor: Colors.black,
  showLoadingAnimation: false,
  steps: const [
    EasyStep(
      icon: Icon(Icons.my_location),
      title: 'You',
      lineText: '1.7 KM',
    ),
    EasyStep(
      icon: Icon(CupertinoIcons.cube_box),
      title: 'Pick Up',
      lineText: '3 KM',
    ),
    EasyStep(
      icon: Icon(CupertinoIcons.flag),
      title: 'Drop Off',
    ),
  ],
  onStepReached: (index) => setState(() => activeStep = index),
),

贡献和支持

如果您发现任何问题或有改进建议，请提交issue或发送pull request。感谢您的支持！

希望这个指南对您有所帮助！如果您有任何问题或需要进一步的帮助，请随时提问。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何在Flutter中使用easy_stepper插件的示例代码。easy_stepper是一个用于创建步进器（Stepper）的Flutter插件，非常适合在需要多步骤表单或流程的场景中使用。

首先，你需要在你的pubspec.yaml文件中添加easy_stepper依赖：

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

然后运行flutter pub get来安装依赖。

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Easy Stepper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyStepperPage(),
    );
  }
}

class MyStepperPage extends StatefulWidget {
  @override
  _MyStepperPageState createState() => _MyStepperPageState();
}

class _MyStepperPageState extends State<MyStepperPage> with SingleTickerProviderStateMixin {
  late final EasyStepperController _stepperController;
  late final List<Step> _steps;

  @override
  void initState() {
    super.initState();
    _stepperController = EasyStepperController();

    _steps = [
      Step(
        title: Text('Step 1: Personal Info'),
        content: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'Name'),
            ),
            TextField(
              decoration: InputDecoration(labelText: 'Email'),
            ),
          ],
        ),
      ),
      Step(
        title: Text('Step 2: Address'),
        content: Column(
          children: [
            TextField(
              decoration: InputDecoration(labelText: 'Street'),
            ),
            TextField(
              decoration: InputDecoration(labelText: 'City'),
            ),
            TextField(
              decoration: InputDecoration(labelText: 'Zip Code'),
            ),
          ],
        ),
      ),
      Step(
        title: Text('Step 3: Review'),
        content: Column(
          children: [
            Text('Review your information here...'),
          ],
        ),
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Easy Stepper Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: EasyStepper(
          controller: _stepperController,
          steps: _steps,
          linear: true, // 是否线性，即是否必须按顺序完成
          onStepContinue: (step) {
            // 可以在这里添加逻辑，比如在继续之前验证表单
            print('Continuing to step: ${step.title}');
            return true; // 返回true表示可以继续，false表示不能继续
          },
          onStepCancel: (step) {
            // 可以在这里添加逻辑，比如在取消时做处理
            print('Cancelled step: ${step.title}');
          },
          onStepComplete: (step) {
            // 可以在这里添加逻辑，比如在完成某一步时做处理
            print('Completed step: ${step.title}');
          },
          onFinish: () {
            // 可以在这里添加逻辑，比如在完成所有步骤时做处理
            print('All steps completed!');
          },
        ),
      ),
    );
  }
}

解释

  1. 依赖导入：

    • 在pubspec.yaml文件中添加easy_stepper依赖。

  2. 创建应用：

    • MyApp是根Widget，包含一个MaterialApp。

  3. Stepper页面：

    • MyStepperPage是一个StatefulWidget，包含了一个EasyStepperController来控制步进器的行为。
    • _steps是一个List<Step>，每个Step包含一个标题和内容。

  4. 构建Stepper：

    • EasyStepper Widget使用_stepperController和_steps来构建步进器。
    • linear属性控制是否必须按顺序完成步骤。
    • onStepContinue、onStepCancel、onStepComplete和onFinish回调可以在步骤继续、取消、完成和所有步骤完成时执行自定义逻辑。

你可以根据需要自定义每个步骤的内容和逻辑。希望这个示例代码对你有所帮助！

回到顶部