Flutter步进器im_stepper

今天给大家带来一个Flutter步进器im_stepper是简单易用的图标步进器小部件 ，大家可以在自己的下个项目中体验，整体还不错，

作者：坚果

公众号："大前端之旅"

华为云享专家，InfoQ签约作者，阿里云专家博主，51CTO博客首席体验官，开源项目GVA成员之一，专注于大前端技术的分享，包括Flutter,小程序,安卓，VUE，JavaScript。

接下来我们看一下如何使用

1.安装

flutter pub add im_stepper
​

或者

dependencies:
  im_stepper: ^0.1.3

flutter pub get.

2.导入

import 'package:im_stepper/main.dart';
import 'package:im_stepper/stepper.dart';

3.使用

图标步进器

简单易用的图标步进器小部件，其中每个图标定义一个步骤。因此，图标的总数表示可用步骤的总数。下面的示例构建以下内容IconStepper：

在上面IconStepper,我们总共有7 个步骤（由 7 个图标表示），由虚线分隔。内置的下一个和上一个按钮、底部的按钮以及点击一个单独的步骤，都控制这个特定示例中的步进。每个步骤的内容，即页眉，页面内容，以及虚线分隔符，下一个和上一个按钮等，都是完全可定制的。

代码说明

在下面的代码片段中，我们必须定义两个变量：activeStep和upperBound来控制步进器。activeStep分配给步进器的属性activeStep。upperBound 变量 从步进器的*函数接收其值。upperBound

按照该build()方法，我们定义了从外部控制步进器的下一个和上一个按钮。下一个和上一个按钮分别递增和递减activeStep变量。但是，递增和递减受到lowerBoundupperBound和if语句的约束，这是步进器从外部按钮正常运行的必要条件。

另一种控制步进器的方法是启用内置按钮。当内置按钮被点击时，它们会触发onStepReached(index)回调，提供index到达的步骤。在这里，您可以为达到特定步骤时要显示的内容添加逻辑。

控制步进器的最后一种方法是启用该stepTapping属性。像内置按钮一样，它也会触发onStepReached(index)回调。但是，请在下面的代码中观察到它将 设置activeStep为 step 的index.

要记住的事情

• 您可以将初始步长设置为任何有效值，即，值的范围必须为0到upperBound。

• activeStep 也可以用来跳跃不同的步骤。

支持的方式

• 图标步进器

• 图像步进器

• 数字步进器

• 点步进器

• DotStepper 自定义

图标步进器

 IconStepper(
                icons: [
                  Icon(Icons.supervised_user_circle),
                  Icon(Icons.flag),
                  Icon(Icons.access_alarm),
                  Icon(Icons.supervised_user_circle),
                  Icon(Icons.flag),
                  Icon(Icons.access_alarm),
                  Icon(Icons.supervised_user_circle),
                ],
​
                // activeStep property set to activeStep variable defined above.
                activeStep: activeStep,
​
                // This ensures step-tapping updates the activeStep.
                onStepReached: (index) {
                  setState(() {
                    activeStep = index;
                  });
                },
              ),

图像步进器

ImageStepper(
    images:[
        AssetImage('assets/me.jpg'),
        AssetImage('assets/you.jpg'),
        AssetImage('assets/star.jpg),
    ]
),

数字步进器

NumberStepper(
    numbers:[
        1,
        2,
        3,
        4,
    ]
),

预览

代码（图标步进器）

import 'package:flutter/material.dart';
import 'package:im_stepper/stepper.dart';
​
void main() {
  runApp(IconStepperDemo());
}
​
class IconStepperDemo extends StatefulWidget {
  @override
  _IconStepperDemo createState() => _IconStepperDemo();
}
​
class _IconStepperDemo extends State<IconStepperDemo> {
  // THE FOLLOWING TWO VARIABLES ARE REQUIRED TO CONTROL THE STEPPER.
  int activeStep = 5; // Initial step set to 5.
​
  int upperBound = 6; // upperBound MUST BE total number of icons minus 1.
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('IconStepper Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              IconStepper(
                icons: [
                  Icon(Icons.supervised_user_circle),
                  Icon(Icons.flag),
                  Icon(Icons.access_alarm),
                  Icon(Icons.supervised_user_circle),
                  Icon(Icons.flag),
                  Icon(Icons.access_alarm),
                  Icon(Icons.supervised_user_circle),
                ],
​
                // activeStep property set to activeStep variable defined above.
                activeStep: activeStep,
​
                // This ensures step-tapping updates the activeStep.
                onStepReached: (index) {
                  setState(() {
                    activeStep = index;
                  });
                },
              ),
              header(),
              Expanded(
                child: FittedBox(
                  child: Center(
                    child: Text('$activeStep'),
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  previousButton(),
                  nextButton(),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
​
  /// Returns the next button.
  Widget nextButton() {
    return ElevatedButton(
      onPressed: () {
        // Increment activeStep, when the next button is tapped. However, check for upper bound.
        if (activeStep < upperBound) {
          setState(() {
            activeStep++;
          });
        }
      },
      child: Text('Next'),
    );
  }
​
  /// Returns the previous button.
  Widget previousButton() {
    return ElevatedButton(
      onPressed: () {
        // Decrement activeStep, when the previous button is tapped. However, check for lower bound i.e., must be greater than 0.
        if (activeStep > 0) {
          setState(() {
            activeStep--;
          });
        }
      },
      child: Text('Prev'),
    );
  }
​
  /// Returns the header wrapping the header text.
  Widget header() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.orange,
        borderRadius: BorderRadius.circular(5),
      ),
      child: Row(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text(
              headerText(),
              style: TextStyle(
                color: Colors.black,
                fontSize: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }
​
  // Returns the header text based on the activeStep.
  String headerText() {
    switch (activeStep) {
      case 1:
        return 'Preface';
​
      case 2:
        return 'Table of Contents';
​
      case 3:
        return 'About the Author';
​
      case 4:
        return 'Publisher Information';
​
      case 5:
        return 'Reviews';
​
      case 6:
        return 'Chapters #1';
​
      default:
        return 'Introduction';
    }
  }
}
​

最后我们来看看他的属性

 IconStepper({
    this.icons,
    this.enableNextPreviousButtons = true,
    this.enableStepTapping = true,//是否可以点击跳转
    this.previousButtonIcon,//上一步的按钮
    this.nextButtonIcon,//下一步的按钮
    this.onStepReached,
    this.direction = Axis.horizontal,//Axis.horizontal
    this.stepColor,
    this.stepPadding = 1.0,
    this.activeStepColor,
    this.activeStepBorderColor,
    this.activeStepBorderWidth = 0.5,
    this.activeStepBorderPadding = 5.0,
    this.lineColor,
    this.lineLength = 50.0,//间隔长度
    this.lineDotRadius = 1.0,//图标大小
    this.stepRadius = 24.0,//图标大小
    this.stepReachedAnimationEffect = Curves.bounceOut,
    this.stepReachedAnimationDuration = const Duration(seconds: 1),
    this.steppingEnabled = true,
    this.scrollingDisabled = false,
    this.activeStep = 0,//初始
    this.alignment = Alignment.center,
  });

点步进器（代码）

import 'package:flutter/material.dart';
import 'package:im_stepper/stepper.dart';
​
void main() => runApp(DotStepperDemo());
​
class DotStepperDemo extends StatefulWidget {
  @override
  _DotStepperDemo createState() => _DotStepperDemo();
}
​
class _DotStepperDemo extends State<DotStepperDemo> {
  // REQUIRED: USED TO CONTROL THE STEPPER.
  int activeStep = 0; // Initial step set to 0.
​
  // OPTIONAL: can be set directly.
  int dotCount = 5;
​
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('DotStepper Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: [
              DotStepper(
                // direction: Axis.vertical,
                dotCount: dotCount,
                dotRadius: 12,
​
                /// THIS MUST BE SET. SEE HOW IT IS CHANGED IN NEXT/PREVIOUS BUTTONS AND JUMP BUTTONS.
                activeStep: activeStep,
                shape: Shape.stadium,
                spacing: 10,
                indicator: Indicator.shift,
​
                /// TAPPING WILL NOT FUNCTION PROPERLY WITHOUT THIS PIECE OF CODE.
                onDotTapped: (tappedDotIndex) {
                  setState(() {
                    activeStep = tappedDotIndex;
                  });
                },
​
                // DOT-STEPPER DECORATIONS
                fixedDotDecoration: FixedDotDecoration(
                  color: Colors.red,
                ),
​
                indicatorDecoration: IndicatorDecoration(
                  // style: PaintingStyle.stroke,
                  // strokeWidth: 8,
                  color: Colors.deepPurple,
                ),
                lineConnectorDecoration: LineConnectorDecoration(
                  color: Colors.red,
                  strokeWidth: 0,
                ),
              ),
​
              /// Jump buttons.
              Padding(padding: const EdgeInsets.all(18.0), child: steps()),
​
              // Next and Previous buttons.
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [previousButton(), nextButton()],
              )
            ],
          ),
        ),
      ),
    );
  }
​
  /// Generates jump steps for dotCount number of steps, and returns them in a row.
  Row steps() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: List.generate(dotCount, (index) {
        return ElevatedButton(
          child: Text('${index + 1}'),
          onPressed: () {
            setState(() {
              activeStep = index;
            });
          },
        );
      }),
    );
  }
​
  /// Returns the next button widget.
  Widget nextButton() {
    return ElevatedButton(
      child: Text('Next'),
      onPressed: () {
        /// ACTIVE STEP MUST BE CHECKED FOR (dotCount - 1) AND NOT FOR dotCount To PREVENT Overflow ERROR.
        if (activeStep < dotCount - 1) {
          setState(() {
            activeStep++;
          });
        }
      },
    );
  }
​
  /// Returns the previous button widget.
  Widget previousButton() {
    return ElevatedButton(
      child: Text('Prev'),
      onPressed: () {
        // activeStep MUST BE GREATER THAN 0 TO PREVENT OVERFLOW.
        if (activeStep > 0) {
          setState(() {
            activeStep--;
          });
        }
      },
    );
  }
}
​

DotStepper 自定义

// DOT-STEPPER DECORATIONS
  fixedDotDecoration: FixedDotDecoration(
    color: Colors.blueGrey,
  ),
  indicatorDecoration: IndicatorDecoration(
    color: Colors.deepOrange,
    style: PaintingStyle.stroke,
    strokeWidth: 10
  ),
  lineConnectorDecoration: LineConnectorDecoration(
    color: Colors.red,
  ),

好的，今天的内容分享到这儿，大家喜欢的话，可以关注我的公众号“大前端之旅”

• Github:https://github.com/ITmxs

• Gitee:https://gitee.com/itmxs/

• 掘金：https://juejin.cn/user/3843548384077192

• InfoQ:https://xie.infoq.cn/article/a6704ba471cbea84320d2c7c4

• 51CTO博客https://blog.51cto.com/jianguo

• CSDN:https://blog.csdn.net/qq_39132095