Hero动画

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'HeroAnimationRouteB.dart';

// 路由A
class HeroAnimationRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hero"),
      ),
      body: Container(
        alignment: Alignment.center,
        child: InkWell(
          child: Hero(
            tag: "avatar", //唯一标记，前后两个路由页Hero的tag必须相同
            child: Image.asset(
              "assets/images/splash_bg.png",
              fit: BoxFit.cover,
              width: 200,
              height: 200,
            ),
          ),
          onTap: () {
            // Navigator.push(context, FadeRoute(builder: (context) {
            //   return HeroAnimationRouteB();
            // }));
            //打开B路由
            Navigator.push(context, PageRouteBuilder(pageBuilder:
                (BuildContext context, Animation animation,
                    Animation secondaryAnimation) {
              return new FadeTransition(
                opacity: animation,
                child: Scaffold(
                  appBar: AppBar(
                    title: Text("原图"),
                  ),
                  body: HeroAnimationRouteB(),
                ),
              );
            }));
          },
        ),
      ),
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

// class HeroAnimationRouteB extends StatelessWidget {
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(
//         title: Text("查看"),
//       ),
//       body: Center(
//         child: Hero(
//           tag: "avatar", //唯一标记，前后两个路由页Hero的tag必须相同
//           child: Padding(
//             padding: EdgeInsets.fromLTRB(20, 200, 20, 0),
//             child: Column(
//               children: [
//                 Image.asset("assets/images/ic_head_def.png"),
//                 Container(
//                   child: isShow
//                       ? Text(
//                           "图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情图片详情")
//                       : null,
//                 )
//               ],
//             ),
//           ),
//         ),
//       ),
//     );
//   }
// }

class HeroAnimationRouteB extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new _HeroAnimationRouteB();
  }
}

bool isShow = false;

class _HeroAnimationRouteB extends State<HeroAnimationRouteB> {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 500), () {
      setState(() {
        isShow = true;
      });
    });
  }

  @override
  void deactivate() {
    isShow = false;
    super.deactivate();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Hero(
            tag: "avatar", //唯一标记，前后两个路由页Hero的tag必须相同
            child: Column(
              children: [
                Container(
                  child: Image.asset(
                    "assets/images/splash_bg.png",
                    width: MediaQuery.of(context).size.width,
                    height: 200,
                    fit: BoxFit.fitWidth,
                  ),
                ),
                if (isShow) Text("图片详情")
              ],
            ),
          )
        ],
      ),
    );
  }
}

image.png image.png

apk下载地址

https://www.pgyer.com/IUVS