How do I create a flowchart in flutter?

Question

Well this is the thing, I wanted to create a sort of roadmap inside my app, and kind of create a flow diagram for it. I wanted each of the circles to redirect to another page so I intended to add buttons for that. What I've been struggling with is to make the arrow lines. The straight lines, I can use dividers. I don't know how to make diagonal lines.

Is there anyway to do that in Flutter or is there any widgets I can import to make the entire flowchart process easier?

Answer 1

Output - 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,
                              ),
                            ),
                          ],
                        )),
                  ],
                ),
              ),
            ],
          )
        ],
      )