I want to enter object coordinates manually in Flutter?

Question

Hello everyone, I want to constantly change the values of the object on the screen with the code above. So I'll manually enter the posx and posy coordinates and the object will appear at that position. I want to get posx and posy values to localoffset. Can someone help me? Thank you.


void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  double posx = 300.0;
  double posy = 500.0;

  void onTapDown(BuildContext context, TapDownDetails details) {
    print('${details.globalPosition}');
    final RenderBox box = context.findRenderObject();
    final Offset localOffset = box.globalToLocal(offset.zero);
    setState(() {
      posx = localOffset.dx;
      posy = localOffset.dy;
    });
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) => MaterialApp(
      theme: ThemeData(primaryColor: Colors.white),
      home: Scaffold(
          appBar: AppBar(
            title: Text('Coordinates'),
          ),
          body: GestureDetector(
            onTapDown: (TapDownDetails details) => onTapDown(context, details),
            child: ListView(
              children: [
                Stack(
                  children: [
                    Positioned(
                      top: 200,
                      left: 70,
                      child: Container(
                        //color: Colors.red,
                        width: 30,
                        height: 30,
                        decoration: BoxDecoration(
                            shape: BoxShape.circle, color: Colors.red),
                      ),
                    ),
                    Container(
                      // color: Colors.green,
                      width: 50,
                      height: 700,
                    ),
                  ],
                )
              ],
            ),
          )));
}

For example, when I enter posx = 750 and posy = 100 instead of posx = 300 and posy = 500, it will appear at that point.

user_10157127 · Answer

The tap event is preventing by Stack while it is the bottom widget based on GestureDetector. Just use Stack as body and place GestureDetector as last child on Stack. and we don't need extra MaterialApp on HomePage

Widgets priority is bottom to top.

To be more precious with tap position, minimize the half height and width of (Container) renderBox from tap position.

Run on dartPad

class _HomePageState extends State {
  double posx = 100.0;
  double posy = 300.0;
  @override
  Widget build(BuildContext context) => Scaffold(
        body: Stack(
          children: [
            Positioned(
              top: posy,
              left: posx,
              child: Container(
                width: 30,
                height: 30,
                decoration: const BoxDecoration(
                    shape: BoxShape.circle, color: Colors.red),
              ),
            ),
            GestureDetector(
              onTapDown: (TapDownDetails details) {
                final dx = details.localPosition.dx;
                final dy = details.localPosition.dy;
                setState(() {
                  posx = dx;
                  posy = dy;
                });
              },
            ),
          ],
        ),
      );
}

I want to enter object coordinates manually in Flutter?

1 Answers