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

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,
                      )
                    ],
                  ),
                )
              ],
            );
          }));

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

谁能帮我创建这种类型的步进器

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

标签： androidiosflutterdartflutter-layout

Answer 1

我有一些资源可以和你分享。只需检查一下，看看是否适合您。这些是：

• Stepper Class Flutter：一个材质步进器小部件，显示一系列步骤的进度。
• 用于 Flutter 的 Cupertino 步进器包
• 在 Flutter Youtube 中制作步进器
• 在 Flutter 中制作步进器的 Medium 文章

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