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

【问题标题】：how to create " Doted Line step indicators" in Flutter?如何在 Flutter 中创建“虚线步长指示器”？
【发布时间】：2021-08-21 13:42:46
【问题描述】：

我正在开发一个应用程序，In (Flutter)

我正在尝试使用点线指示器构建一个步进栏但无法这样做，我能够从搜索中获得的材料只是简单的步进指示器而不是点线，而不是我想要的下面的截图有人可以帮助我如何用代码在 Flutter 中构建这个指标！谢谢你。

【问题讨论】：

标签： flutter indicator

【解决方案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,
                    )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

【讨论】：

您可以通过添加动画等微交互来改进它
好的，我试试，然后告诉你。
我会这样做的，谢谢兄弟，你真的帮助了我，我很感激。最后一件事兄弟在屏幕截图中，圆圈的轮廓颜色为浅粉色，内部是透明的，可以启发我！
太棒了！您可以根据所选步骤更改图标类型
很棒的兄弟谢谢。我正在这样做。

【解决方案2】：

您可以使用 Stepper 小部件。看这篇文章https://developer.school/flutter-how-to-use-the-stepper-widget/

【讨论】：

【解决方案3】：

你可以这样做：堆栈包含

您想要的高度为 1 和宽度为 1 的容器
行，里面有 5 个容器，每个容器一个，每个指示器都有你想要的圆圈装饰

然后声明一个整数类型的变量并将其值设置为 next 然后您可以检查是否 indecator == 0 ==> 更改第一个容器的装饰>> if indecator == 1 ==> 更改第二个容器的装饰...等等。

【讨论】：