Flutter学习-Hero动画

最新推荐文章于 2024-05-16 22:37:20 发布

suyihao37

最新推荐文章于 2024-05-16 22:37:20 发布

阅读量223

点赞数

分类专栏： Flutter 文章标签： Flutter Dart Hero 动画

本文链接：https://blog.csdn.net/weixin_45376030/article/details/103128527

版权

Flutter 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: '动画demo2', home: FirstPage());
  }
}

//实现点击缩略图进行路由跳转，图片尺寸变大
class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('动画路由-FirstPage'),
      ),
      body: Center(
        child: Container(
          alignment: Alignment.topCenter,
          child: InkWell(
            child: Hero(
              tag: 'avatar',
              child: ClipOval(
                child: Image.asset(
                  'imgs/demo.jpg',
                  width: 50,
                ),
              ),
            ),
            onTap: () {
              Navigator.push(context, PageRouteBuilder(pageBuilder:
                  (BuildContext context, Animation animation,
                      Animation secondaryAnimation) {
                return FadeTransition(
                  opacity: animation,
                  child: Scaffold(
                    appBar: AppBar(
                      title: Text('原图'),
                    ),
                    body: SecondPage(),
                  ),
                );
              }));
            },
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Hero(
        tag: 'avatar',
        child: Image.asset('imgs/demo.jpg'),
      ),
    );
  }
}