Flutter圆形步骤指示器插件flutter_circle_stepper的使用

Flutter圆形步骤指示器插件flutter_circle_stepper的使用

特性

screenshot - `flutter_circle_stepper` 是一个简单的圆形步骤指示器，用于在 Flutter 应用程序中显示进度。

使用方法

要使用 flutter_circle_stepper 插件，首先需要将其添加到你的 pubspec.yaml 文件中：

dependencies:
  flutter_circle_stepper: ^x.x.x

然后，你可以按照以下示例代码来实现一个简单的圆形步骤指示器：

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

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

class MainApp extends StatefulWidget {
  const MainApp({super.key});

  [@override](/user/override)
  State<MainApp> createState() => _MainAppState();
}

class _MainAppState extends State<MainApp> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              FlutterCircleStepper(
                stepperLength: 5, // 设置总共有5个步骤
                progressColor: Colors.blue, // 已完成步骤的颜色
                unfinishedColor: Colors.grey, // 未完成步骤的颜色
                // 可选回调函数，用于处理步骤交互
                onStepTapped: (index) => debugPrint('Stepper at $index tapped'), // 点击某个步骤时的回调
                onNext: () => debugPrint('Next pressed'), // 点击“下一步”按钮时的回调
                onPrevious: () => debugPrint('Previous pressed'), // 点击“上一步”按钮时的回调
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter圆形步骤指示器插件flutter_circle_stepper的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

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


当然，以下是一个关于如何使用 flutter_circle_stepper 插件来创建圆形步骤指示器的代码示例。这个插件非常适合用于展示具有多个步骤的流程，如用户注册、表单填写等。

首先，确保你的 pubspec.yaml 文件中已经添加了 flutter_circle_stepper 依赖：

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

然后运行 flutter pub get 来获取依赖。

接下来，你可以在你的 Flutter 应用中使用这个插件。下面是一个完整的示例，展示如何在一个简单的 Flutter 应用中使用 flutter_circle_stepper：

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

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

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

class StepperDemo extends StatefulWidget {
  @override
  _StepperDemoState createState() => _StepperDemoState();
}

class _StepperDemoState extends State<StepperDemo> {
  int currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Expanded(
          child: CircleStepper(
            totalSteps: 3,
            currentStep: currentStep,
            onStepTapped: (int step) {
              setState(() {
                currentStep = step;
              });
            },
            onStepContinue: () {
              if (currentStep < 2) {
                setState(() {
                  currentStep += 1;
                });
              } else {
                // Handle final step completion
                print('Completed all steps!');
              }
            },
            onStepCancel: () {
              if (currentStep > 0) {
                setState(() {
                  currentStep -= 1;
                });
              }
            },
            stepContentBuilder: (BuildContext context, int stepIndex) {
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Text(
                    'Step ${stepIndex + 1}:',
                    style: TextStyle(fontSize: 20),
                  ),
                  SizedBox(height: 20),
                  Text(
                    'This is the content of step ${stepIndex + 1}',
                    style: TextStyle(fontSize: 16),
                  ),
                ],
              );
            },
          ),
        ),
        SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                if (currentStep > 0) {
                  setState(() {
                    currentStep -= 1;
                  });
                }
              },
              child: Text('Previous'),
            ),
            SizedBox(width: 20),
            ElevatedButton(
              onPressed: () {
                if (currentStep < 2) {
                  setState(() {
                    currentStep += 1;
                  });
                } else {
                  // Handle final step completion
                  print('Completed all steps!');
                }
              },
              child: Text('Next'),
            ),
          ],
        ),
      ],
    );
  }
}

在这个示例中：

  1. 我们创建了一个包含三个步骤的 CircleStepper。
  2. totalSteps 属性定义了总步骤数。
  3. currentStep 属性表示当前步骤。
  4. onStepTapped、onStepContinue 和 onStepCancel 回调函数分别处理用户点击步骤、继续到下一步和取消当前步骤的操作。
  5. stepContentBuilder 用于构建每个步骤的内容。

你可以根据需要自定义每个步骤的内容和样式。希望这个示例能帮助你更好地理解如何使用 flutter_circle_stepper 插件。

回到顶部