How to animate an image moving across the screen?

Question

I have a fixed size image (of a playing card) and I'd like to write code so users see the image slide from one part of the screen to another (like a card being dealt and moving across the surface). If possible, it would be best to do so in a way that's moderately responsive for different screen sizes.

Most of what I've seen or learned about involves Hero widgets or animation where a widget changes size but stays in the same location. I'm asking about something different.

Answer 1

What you want is the animatedPosition widget, it will move any widget from one point of the screen to another, you can even morph the size of the widget.

https://api.flutter.dev/flutter/widgets/AnimatedPositioned-class.html

AnimatedPositioned(
        width: selected ? 200.0 : 50.0,
        height: selected ? 50.0 : 200.0,
        top: selected ? 50.0 : 150.0,
        duration: const Duration(seconds: 2),
        curve: Curves.fastOutSlowIn,
        child: GestureDetector(
          onTap: () {
            setState(() {
              selected = !selected;
            });
          },
          child: Container(
            color: Colors.blue,
            child: const Center(child: Text('Tap me')),
          ),
        ),
      ),