Flutter 颤振：如何动态创建水平时间轴小部件

我在flutter中创建了4页（表单），表单底部有next和prev按钮。然后根据活动页面的不同，我想向用户展示附在每个页面顶部的图像

图像显示用户位于第3页，上一页已完成

我怎样才能创造这个

谢谢你的帮助

---

在我看来，没有现成的软件包可以做到这一点。您必须编写自己的类才能实现，这相当容易。下面是示例代码和完整代码

只需将下面的类称为ScreenProgress（ticks:2），它将返回与问题中的图像类似的内容

注意：使用下面的代码作为示例（而不是最终实现）

class ScreenProgress扩展了无状态小部件{
最后的整数刻度；
屏幕进度（{@required this.ticks}）；
@凌驾
小部件构建（构建上下文）{
返回行(
儿童：[
勾选1（），
垫片（），
第（）行，
垫片（），
勾选2（），
垫片（），
第（）行，
垫片（），
勾选3（），
垫片（），
第（）行，
垫片（），
勾选4（），
],
);
}
小部件勾选（布尔被勾选）{
返回isChecked？图标（图标。选中圆圈，颜色：Colors.blue，）：图标（图标。单选按钮未选中，颜色：Colors.blue，）；
}
小部件1（）{
返回此项。勾号>0？勾号（真）：勾号（假）；
}
小部件2（）{
返回此项。勾号>1？勾号（真）：勾号（假）；
}
小部件3（）{
返回此项。勾选>2？勾选（真）：勾选（假）；
}
小部件4（）{
返回此项。勾号>3？勾号（真）：勾号（假）；
}
小部件间隔器（）{
返回容器(
宽度：5.0，
);
}
小部件行（）{
返回容器(
颜色：颜色，蓝色，
身高：5.0，
宽度：50.0，
);
}
}

class ScreenProgress extends StatelessWidget {

  final int ticks;

  ScreenProgress({@required this.ticks});


  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        tick1(),
        spacer(),
        line(),
        spacer(),
        tick2(),
        spacer(),
        line(),
        spacer(),
        tick3(),
        spacer(),
        line(),
        spacer(),
        tick4(),
      ],
    );


  }

  Widget tick(bool isChecked){
    return isChecked?Icon(Icons.check_circle,color: Colors.blue,):Icon(Icons.radio_button_unchecked, color: Colors.blue,);
  }

  Widget tick1() {
    return this.ticks>0?tick(true):tick(false);
  }
  Widget tick2() {
    return this.ticks>1?tick(true):tick(false);
  }
  Widget tick3() {
    return this.ticks>2?tick(true):tick(false);
  }
  Widget tick4() {
    return this.ticks>3?tick(true):tick(false);
  }

  Widget spacer() {
    return Container(
      width: 5.0,
    );
  }

  Widget line() {
    return Container(
      color: Colors.blue,
      height: 5.0,
      width: 50.0,
    );
  }
}