Search code examples
animationflutteronclickgesturedetectorflare

Flutter: Show where user clicked


Is it possible to show an animation where the user clicked on the screen in flutter. I would like a small animated star to appear right where the user pressed on the screen.

I have this animation which for the moments just loops but i only want it to loop while the user presses the screen.

 new Container(
  alignment: Alignment(0.0, -1.0),

    child: new Container(
     height: 410.0,

            child: FlareActor(
              "assets/images/nyastar.flr",

             animation: _animationName,
            )
    )
      ),

Solution

  • Source: https://stackoverflow.com/a/46566392/5882307

    import 'package:flutter/material.dart';
    
    class Demo extends StatefulWidget {
      @override
      MyHomePageState createState() => new MyHomePageState();
    }
    
    class MyHomePageState extends State<Demo> {
      double posx = 100.0;
      double posy = 100.0;
    
      void onTapDown(BuildContext context, TapDownDetails details) {
        final RenderBox box = context.findRenderObject();
        final Offset localOffset = box.globalToLocal(details.globalPosition);
        setState(() {
          posx = localOffset.dx;
          posy = localOffset.dy;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return new GestureDetector(
          onTapDown: (TapDownDetails details) => onTapDown(context, details),
          child: new Stack(fit: StackFit.expand, children: <Widget>[
            // Hack to expand stack to fill all the space. There must be a better
            // way to do it.
            new Container(color: Colors.white),
            new Positioned(
              child: Text('hello'), //your widget to be shown
              left: posx,
              top: posy,
            )
          ]),
        );
      }
    }