Flutter进度条步骤指示器插件progress_bar_steppers的使用

Flutter进度条步骤指示器插件progress_bar_steppers的使用

特性

  • 水平步骤指示器
  • 垂直步骤指示器
  • 自定义步骤样式，指示器颜色，标签最大行数等…

开始使用

安装包

在pubspec.yaml文件中添加依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_bar_steppers: ^0.0.2

导入包

在需要使用的Dart文件中导入：

import 'package:progress_bar_steppers/steppers.dart';

截图

水平步骤指示器（正常）

水平步骤指示器

水平步骤指示器（错误）

水平步骤指示器错误

垂直步骤指示器（正常）

垂直步骤指示器

使用方法

水平步骤指示器

var currentStep = 1;
var totalSteps = 0;
final stepsData = [
  StepperData(
    label: 'Step 1',
  ),
  StepperData(
    label: 'Step 2',
  ),
  StepperData(
    label: 'Step 3',
  ),
  StepperData(
    label: 'Step 4',
  ),
];

[@override](/user/override)
void initState() {
  totalSteps = stepsData.length;
  super.initState();
}

[@override](/user/override)
Widget build(BuildContext context) {
  return Steppers(
    direction: StepperDirection.horizontal,
    labels: stepsData,
    currentStep: currentStep,
    stepBarStyle: StepperStyle(
      maxLineLabel: 2,
    ),
  );
}

垂直步骤指示器

var currentStep = 1;
var totalSteps = 0;
late List<StepperData> stepsData;

[@override](/user/override)
void initState() {
  super.initState();
  stepsData = [
    StepperData(
      label: 'Step 1',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
      child: ElevatedButton(
        child: const Text('Button 1'),
        onPressed: () {},
      ),
    ),
    StepperData(
      label: 'Step 2',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
    ),
    StepperData(
      label: 'Step 3',
    ),
    StepperData(
      label: 'Step 4',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
    ),
  ];
  totalSteps = stepsData.length;
}

[@override](/user/override)
Widget build(BuildContext context) {
  return Steppers(
    direction: StepperDirection.vertical,
    labels: stepsData,
    currentStep: currentStep,
    stepBarStyle: StepperStyle(
      maxLineLabel: 2,
    ),
  );
}

示例代码

以下是完整的示例代码：

import 'package:flutter/material.dart';
import 'package:progress_bar_steppers/steppers.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Steppers Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: StepBarPage(),
    );
  }
}

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

  [@override](/user/override)
  State<StepBarPage> createState() => _StepBarPageState();
}

class _StepBarPageState extends State<StepBarPage> {
  var currentStep = 1;
  var totalSteps = 0;
  late List<StepperData> stepsData;

  [@override](/user/override)
  void initState() {
    super.initState();
    stepsData = [
      StepperData(
        label: 'Step 1',
        description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
        child: ElevatedButton(
          child: const Text('Button 1'),
          onPressed: () {},
        ),
      ),
      StepperData(
        label: 'Step 2',
        description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
      ),
      StepperData(
        label: 'Step 3',
      ),
      StepperData(
        label: 'Step 4',
        description:
            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec efficitur risus est, sed consequat libero luctus vitae. Duis ultrices magna quis risus porttitor luctus. Nulla vel tempus nisl, ultricies congue lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.',
      ),
    ];
    totalSteps = stepsData.length;
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            const SizedBox(
              height: 16,
            ),
            Text(
              'Horizontal Steppers',
              style: StepperStyles.t16SB.copyWith(color: StepperColors.grey500s),
            ),
            const SizedBox(
              height: 16,
            ),
            Steppers(
              direction: StepperDirection.horizontal,
              labels: stepsData,
              currentStep: currentStep,
              stepBarStyle: StepperStyle(
                maxLineLabel: 2,
              ),
            ),
            const SizedBox(
              height: 40,
            ),
            Text(
              'Vertical Steppers',
              style: StepperStyles.t16SB.copyWith(color: StepperColors.grey500s),
            ),
            const SizedBox(
              height: 16,
            ),
            Steppers(
              direction: StepperDirection.vertical,
              labels: stepsData,
              currentStep: currentStep,
              stepBarStyle: StepperStyle(
                maxLineLabel: 2,
              ),
            ),
            const SizedBox(
              height: 16,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                ElevatedButton(
                  child: const Text('Next'),
                  onPressed: () {
                    setState(() {
                      _nextStep();
                    });
                  },
                ),
                ElevatedButton(
                  child: const Text('Fix Error'),
                  onPressed: () {
                    setState(() {
                      _fixError();
                    });
                  },
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _nextStep() {
    _doWork();
    if (currentStep > totalSteps) return;
    // 检查当前步骤是否有错误，然后移动到下一步
    if (stepsData[currentStep - 1].state != StepperState.error) {
      currentStep++;
    }
  }

  _doWork() {
    if (currentStep == 3) {
      // 在第3步时模拟一个错误
      stepsData[2].state = StepperState.error;
    }
  }

  _fixError() {
    // 修复第3步的错误以继续到第4步
    if (stepsData[2].state == StepperState.error) {
      stepsData[2].state = StepperState.normal;
      currentStep++;
    }
  }
}

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

1 回复

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


当然，以下是如何在Flutter中使用progress_bar_steppers插件来实现进度条步骤指示器的示例代码。这个插件可以帮助你创建一个直观的多步骤进度条。

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

dependencies:
  flutter:
    sdk: flutter
  progress_bar_steppers: ^latest_version  # 请替换为最新版本号

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

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

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

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

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

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _currentStep = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Bar Stepper Demo'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: <Widget>[
            ProgressBarStepper(
              totalSteps: 4,
              currentStep: _currentStep,
              onStepChange: (step) {
                setState(() {
                  _currentStep = step;
                });
              },
            ),
            SizedBox(height: 20),
            Expanded(
              child: ListView(
                children: [
                  _buildStepContent(0),
                  if (_currentStep >= 1) _buildStepContent(1),
                  if (_currentStep >= 2) _buildStepContent(2),
                  if (_currentStep >= 3) _buildStepContent(3),
                ],
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.step_backward),
            label: 'Previous',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.step_forward),
            label: 'Next',
          ),
        ],
        currentIndex: 0,
        onTap: (index) {
          if (index == 0 && _currentStep > 0) {
            setState(() {
              _currentStep--;
            });
          } else if (index == 1 && _currentStep < 3) {
            setState(() {
              _currentStep++;
            });
          }
        },
      ),
    );
  }

  Widget _buildStepContent(int step) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Text(
            'Step ${step + 1} Content',
            style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 8),
          Text(
            'This is the content for step ${step + 1}.',
            style: TextStyle(fontSize: 16),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. ProgressBarStepper用于显示步骤进度条。totalSteps属性设置总步骤数，currentStep属性设置当前步骤，onStepChange回调用于处理步骤变化。
  2. 根据当前步骤_currentStep，动态显示相应的步骤内容。
  3. 底部导航栏用于手动切换步骤，增加了用户体验的灵活性。

你可以根据实际需求进一步定制这个示例，比如添加更多的步骤内容、调整样式等。

回到顶部