I want to move an image(a Bee) from the top left corner of page 1 to the bottom right corner of page 2 in an animated transition when onTap is given

Question

I am developing an app, and I want to move an asset, an image of a bee in this case from top left of page 1 to the bottom right of page 2, in an animated fashion, which shows the bee fly to page 2, all this is happening while the user has clicked on the onTap button wrapped in a gestureDetector and the page is transitioning from page 1 to page 2.

I am attaching code for reference. This is page 1

 // ignore_for_file: prefer_const_constructors

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:learn_n_fun/landingScreens/page2.dart';

import '../animation/slidingAnimationForward.dart';

class Page1 extends StatefulWidget {
  const Page1({Key? key}) : super(key: key);

  @override
  _Page1State createState() => _Page1State();
}

class _Page1State extends State<Page1> {
  @override
  Widget build(BuildContext context) {
    var height = MediaQuery.of(context).size.height;
    var width = MediaQuery.of(context).size.width;
    return Scaffold(
        backgroundColor: Colors.white,
        body: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Expanded(
                flex: 2,
                child: Padding(
                  padding: EdgeInsets.fromLTRB(
                      width / 25, height / 10, width / 20, 0),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Welcome",
                        style: TextStyle(
                          // fontSize: height / 20,
                          fontSize: 55,
                          fontWeight: FontWeight.w800,
                          fontFamily: "Playfair Display",
                        ),
                      ),
                      SizedBox(
                        height: height / 100,
                      ),
                      Text(
                        "Have you ever wondered what a Business Model Canvas is?",
                        style: TextStyle(
                          // fontWeight: FontWeight.w400,
                          // fontSize: height / 35,
                          fontSize: 22,
                          fontFamily: "Lato",
                        ),
                      )
                    ],
                  ),
                )),
            Padding(
                padding: EdgeInsets.all(0),
                // flex: 4,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Container(
                      height: height / 8,
                      child: RotationTransition(
                        turns: AlwaysStoppedAnimation(-70 / 360),
                        child: Image.asset(
                          "assets/images/bee.png",
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    Container(
                      margin: EdgeInsets.fromLTRB(width / 9.5, 0, 0, 0),
                      child: Image.asset(
                        "assets/images/florist16.png",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ],
                )),
            Expanded(
                flex: 1,
                child: Container(
                  margin: EdgeInsets.fromLTRB(
                      width / 25, height / 80, width / 25, 0),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Row(
                        children: [
                          CircleAvatar(
                            radius: width / 100,
                            backgroundColor: Colors.black,
                          ),
                          const SizedBox(
                            width: 4,
                          ),
                          CircleAvatar(
                            radius: width / 100,
                            backgroundColor: Colors.grey.withOpacity(.5),
                          ),
                          const SizedBox(
                            width: 4,
                          ),
                          CircleAvatar(
                            radius: width / 100,
                            backgroundColor: Colors.grey.withOpacity(.5),
                          )
                        ],
                      ),
                      GestureDetector(
                          onTap: () {
                            Navigator.push(
                                context, SlidingPageF(child: const Page2()));
                          },
                          child: const ImageIcon(
                            AssetImage("assets/images/Front_arrow.png"),
                            size: 50,
                            color: Colors.black,
                          ))
                    ],
                  ),
                )),
          ],
        ));
  }
}

Any ideas on how i can achieve this?

Answer 1

There is AnimatedAlign widget I think would work in your case. https://api.flutter.dev/flutter/widgets/AnimatedAlign-class.html

Answer 2

You can do it with Hero Widget. https://api.flutter.dev/flutter/widgets/Hero-class.html