How to get width of GestureDetector in flutter?

Question

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?

score 0 · Answer 1 · answered May 29 '23 at 08:56

0

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...

answered May 29 '23 at 08:56

Nguyen family

749
2
12

yes, thats a good idea with the subtraction, but the example above is just for illustation purpose - in my real application, the position of the Container is not so easy to calculate since it is surrounded by some more widgets and in an Expand widget. Also I dont really like the appearance of the Slider-widget. Thats why I dont want to use a Slider. But you are right, it would be much easier. – Zwerg May 29 '23 at 09:05
try to use RenderBox: https://stackoverflow.com/questions/68152970/how-to-get-size-of-a-child-widget -> to get width of child Container – Nguyen family May 29 '23 at 09:12
I cant use the code in the answer to [link](https://stackoverflow.com/questions/68152970/how-to-get-size-of-a-child-widget), it says "A value of type 'RenderObject?' can't be assigned to a variable of type 'RenderBox'". Probably something with the new Dart version? I'm not sure.. – Zwerg May 29 '23 at 09:50
try `key.currentContext!.findRenderObject()! as RenderBox;` – Nguyen family May 29 '23 at 10:25
Thank you for your help, but now it says "The getter 'size' isn't defined for the type 'RenderObject'." to the code line `final sizeRed = renderBoxRed!.size;`. I was not able to figure out any field of RenderObject that holds the widgets width. Any suggestions for that? – Zwerg May 29 '23 at 16:42

score 0 · Accepted Answer · answered Jun 24 '23 at 09:14

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.

How to get width of GestureDetector in flutter?

2 Answers2