I want to create this kind of timeline widget in Flutter where I am getting the list of thresholds from the back-end, so that can be dynamic like [50,100,250,300]. I have one achieved value, such as 175. I want to create the widgets exactly like this where achieved and unachieved nodes and dividers have separate colors.

The code I have tried is shown below

Widget build(BuildContext context) {
    const differance = 300; //two points differance
    const certainPoint = 600;
    const firstThresold = 400;
    const secondThresold = 700;
    const width = 150;
    return Scaffold(
      body: Center(
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                const Text("350"),
                Container(
                  height: 10,
                  width: 10,
                  decoration: const BoxDecoration(
                      shape: BoxShape.circle, color: Colors.red),
                ),
              ],
            ),
            const SizedBox(
              width: ((certainPoint - firstThresold) / differance) * width,
              child: Divider(
                thickness: 5,
                color: Colors.red,
              ),
            ),
            const SizedBox(
              width: ((secondThresold - certainPoint) / differance) * width,
              child: Divider(
                thickness: 5,
                color: Colors.blue,
              ),
            ),
            Container(
              height: 10,
              width: 10,
              decoration: const BoxDecoration(
                  shape: BoxShape.circle, color: Colors.green),
            ),
          ],
        ),
      ),
     );
    }

Now I want it to be exactly like the above mentioned picture with the dynamic value. Can anyone help me with it ? This is beyond my coding knowledge currently.