当给定 onTap 时，我想在动画过渡中将图像（一只蜜蜂）从第 1 页的左上角移动到第 2 页的右下角

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