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