如何在Flutter中创建“虚线步骤指示器”？

Question

我正在开发一个应用程序，在（Flutter）中

我试图构建一个带有点线指示器的步骤栏，但无法这样做，我从搜索中获得的材料只是简单的步骤指示器，没有点线，而不是我想要的，如下面的屏幕截图所示有人可以帮我如何用代码在 Flutter 中构建这个指标吗！谢谢。

Answer 1

只需在圆形图标下创建一个带有分隔线的堆栈即可。请尝试这个代码

class Home extends StatelessWidget {
  final List<int> steps = [1, 2, 3, 4];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF5F5F7),
      body: Center(
        child: Container(
          width: 200.0,
          child: Stack(
            alignment: Alignment.center,
            children: [
              Container(
                width: 180.0,
                child: Divider(
                  color: Colors.grey,
                  thickness: 2,
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  for (var step in steps)
                    Icon(
                      Icons.circle,
                      color: step == 1 ? Colors.redAccent[400] : Colors.grey,
                      size: step == 1 ? 24.0 : 16.0,
                    )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 2

您可以按照以下方式进行： 堆栈包含

1. 高度为 1 且宽度为您想要的容器
2. 行内有 5 个容器，每个指示器一个容器，并带有您想要的圆圈装饰

然后声明一个整数类型的变量并在下一步设置它的值 然后你可以检查 if indecator == 0 ==> 改变第一个容器的装饰 >> if indecator == 1 ==> 改变第二个容器的装饰...等等。

Answer 3

您可以使用步进小部件。请参阅这篇文章。

Answer 4

根据Aditya的回答

只需在圆形图标下创建一个带有分隔线的堆栈即可。请尝试 这段代码

您可以实现并使用简单的逻辑：

 SimpleStepIndicator(
        actualStep: step,
        steps: 3,
  ),

代码：

class SimpleStepIndicator extends StatelessWidget {
  const SimpleStepIndicator({required this.actualStep, this.steps=3,super.key});

  final int actualStep;//update by setState of parent Widget,by hooks, Bloc etc.
  final int steps; //can also be static const


  static const width = 200.0;
  static const colorSuccess = Colors.green;
  static const colorEmpty = Colors.grey;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: SizedBox(
        width: width,
        child: Stack(
          alignment: Alignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                for (var step in List.generate(steps, (index) => index))
                  ...[ Icon(
                    Icons.circle,
                    color: step <= actualStep ?  colorSuccess: colorEmpty,
                    size: step <= actualStep ? 24.0 : 16.0,
                  ),
                    SizedBox(
                      width: steps-1 == step?0:((width-20)/steps+3),
                      child: Divider(
                        color: step < actualStep?colorSuccess: colorEmpty,
                        thickness: 2,
                      ),
                    ),

                  ]
              ],

            )
          ],
        ),
      ),
    );
  }

}