我正在做一个Web应用程序，它看起来像这样：Image of the web app for better understanding，在这里你可以选择你的水应该有多热（只是一个愚蠢的例子来说明我的问题）。
代码如下：

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),
            )),
      ),
    );

我试图检测如何票价从左边缘的用户已按下手势检测器。我添加了一个print语句，它告诉我像素的数量。
但是我需要的是一个百分比，例如当用户按下中间的容器时，它应该返回50%或0.5或类似的东西。仅仅是像素的数量并不能帮助我进一步设置温度。由于容器的宽度随窗口大小而变化，因此我不能简单地将位置的dx值除以容器的宽度。
有办法解决吗？