Question

我想在颤动中创建这种步进器

直到现在我已经尝试了两种方法

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

如果您真的想用那些交错的线代替步进器中图标之间的单个垂直线，那么请检查库的代码，并进行一些最小的改动来制作自己的小部件。

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

1 个答案: