如何在颤振中创建流程图？

Question

这就是事情，我想在我的应用程序中创建一种路线图，并为它创建一个流程图。我希望每个圈子都重定向到另一个页面，所以我打算为此添加按钮。我一直在努力的是制作箭头线。直线，我可以使用分隔线。我不知道怎么画对角线。

在 Flutter 中是否可以这样做，或者我可以导入任何小部件来简化整个流程图过程？

Answer 1

输出 - Image

Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
            width: 100,
            height: 100,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(100),
                border: Border.all(width: 4, color: Colors.black)),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Transform.rotate(
                angle: 10,
                origin: Offset(-10, -22),
                child: Column(
                  children: [
                    Container(
                      width: 80,
                      height: 80,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          border:
                              Border.all(width: 4, color: Colors.black)),
                    ),
                    SizedBox(
                        height: 80,
                        child: Column(
                          children: [
                            Transform.rotate(
                                angle: math.pi / 2,
                                child: Icon(Icons.arrow_back_ios_rounded)),
                            Expanded(
                              child: VerticalDivider(
                                width: 4,
                                color: Colors.black,
                                thickness: 4,
                              ),
                            ),
                          ],
                        )),
                  ],
                ),
              ),
              Column(
                children: [
                  SizedBox(
                      height: 80,
                      child: Column(
                        children: [
                          Expanded(
                            child: VerticalDivider(
                              width: 4,
                              color: Colors.black,
                              thickness: 4,
                            ),
                          ),
                          Transform.rotate(
                              angle: -math.pi / 2,
                              child: Icon(Icons.arrow_back_ios_rounded)),
                        ],
                      )),
                  Container(
                    width: 80,
                    height: 80,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(100),
                        border: Border.all(width: 4, color: Colors.black)),
                  ),
                ],
              ),
              Transform.rotate(
                angle: -10,
                origin: Offset(10, -22),
                child: Column(
                  children: [
                    Container(
                      width: 80,
                      height: 80,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(100),
                          border:
                              Border.all(width: 4, color: Colors.black)),
                    ),
                    SizedBox(
                        height: 80,
                        child: Column(
                          children: [
                            Transform.rotate(
                                angle: math.pi / 2,
                                child: Icon(Icons.arrow_back_ios_rounded)),
                            Expanded(
                              child: VerticalDivider(
                                width: 4,
                                color: Colors.black,
                                thickness: 4,
                              ),
                            ),
                          ],
                        )),
                  ],
                ),
              ),
            ],
          )
        ],
      )