如何在颤振中创建自定义步进器？

Question

我想在 Flutter 中创建这种类型的步进器

到目前为止我已经尝试了这两种方法

Widget get stepper =>
      Container(
          padding: EdgeInsets.all(15),
          color: Colors.white,
          child: ListView.builder(
              itemCount: stepperLIst.length,
              shrinkWrap: true,
              physics: NeverScrollableScrollPhysics(),
              itemBuilder: (context, position) {
                return IntrinsicHeight(
                  child: Container(
                    margin: const EdgeInsets.only(bottom: 20),
                    child: Row(
                        crossAxisAlignment: CrossAxisAlignment.stretch,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Column(
                            mainAxisSize: MainAxisSize.min,
                            verticalDirection: VerticalDirection.down,
                            children: [
                              Image.asset(stepperLIst[position].iconName),
                              SizedBox(height: 10),
                              CustomPaint(painter: LineDashedPainter(lineColor: Colors.grey))

                            ],
                          ),
                          SizedBox(width: 10),
                          Expanded(
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  stepperLIst[position].tittle,
                                  style: BaseStyles.textStyle.copyWith(fontFamily: BaseFonts.bold),
                                ),
                                SizedBox(height: 10),
                                Text(
                                  stepperLIst[position].value,
                                  style: BaseStyles.textStyle,
                                )
                              ],
                            ),
                          )
                        ]),
                  ),
                );
              }));

也使用堆栈

  Widget get stepper2 =>
  Container(
      padding: EdgeInsets.all(15),
      color: Colors.white,
      child: ListView.builder(
          itemCount: stepperLIst.length,
          shrinkWrap: true,
          physics: NeverScrollableScrollPhysics(),
          itemBuilder: (context, position) {
            return Stack(
              children: <Widget>[
                Positioned(
                  left: 0,
                  top: 0,
                  bottom: 0,
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    verticalDirection: VerticalDirection.down,
                    children: [
                      Image.asset(stepperLIst[position].iconName),
                      SizedBox(height: 10),
                      CustomPaint(painter: LineDashedPainter(lineColor: Colors.grey))

                    ],
                  ), // replace with your image
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 40),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        stepperLIst[position].tittle,
                        style: BaseStyles.textStyle.copyWith(fontFamily: BaseFonts.bold),
                      ),
                      SizedBox(height: 10),
                      Text(
                        stepperLIst[position].value,
                        style: BaseStyles.textStyle,
                      )
                    ],
                  ),
                )
              ],
            );
          }));

使用上面的代码我没有得到准确的输出

谁能帮我制作这种类型的步进器

如果需要更多信息，请告诉我。提前致谢。您的努力将不胜感激。

Answer 1

我有一些资源要与您分享。只需检查一下，看看是否适合您。它们是：

• Stepper Class Flutter：材质步进器小部件，可显示一系列步骤的进度。
• Cupertino Stepper Package for Flutter
• Making Stepper in Flutter Youtube
• Medium Article on to make stepper in Flutter

如果您真的希望这些交错线代替 Stepper 中的图标之间的单个垂直线，请查看库的代码并制作您自己的小部件，只需进行一些最小的更改。