How to get width of GestureDetector in flutter?

I'm doing a web-app and it looks like this:
Image of the web app for better understanding, where you can choose how hot your water should be (just a silly example to illustrate my problem).

the code to that looks like the following:

Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: GestureDetector(
            onTapDown: (val) {
              print(val.localPosition.dx);
            },
            child: Container(
              decoration: const BoxDecoration(gradient: LinearGradient(colors: [Colors.blue, Colors.red])),
              height: 100,
              margin: const EdgeInsets.all(20),
            )),
      ),
    );

I'm trying to detect how fare from the left edge the user has pressed the gesture Detector. I add a print statement and it tells me the number of pixels.

But what i need is something like a percentage, for example when the user presses the Container in the middle it should return 50% or 0.5 or something like that. Just the numbers of pixels doesnt help me to further set the temperature. Since the width of the container is changing by the window size, I can not simply divide the dx value of the positoin by the width of the container.

Any ideas how to solve that?

For me, if you want to create a beautiful UI relates to "choose value between x & y", you should use slider instead of GestureDetector - much easier. If you want to get width of screen, use MediaQuery.of(context).size.width, the size of GestureDetector is also the size of it child (well, imagine you remove GestureDetector, what is that Container size). If you have padding, take the screen width minus the padding...

Just put everything in a new widget and use the build context of the build method:

class Thermometer extends StatelessWidget {
  const Thermometer({super.key});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTapDown: (x) {
          print(context.size?.width);
          print("--> ${100 * x.localPosition.dx / (context.size?.width ?? 1)}%");
        },
        child: Container(
          decoration: const BoxDecoration(gradient: LinearGradient(colors: [Colors.blue, Colors.red])),
          height: 100,
        ));
  }
}

That prints something like

779.111083984375

--> 20.764405690078366%

when you tap on it.