Flutter学习之路->Hero动画实现方式

217 阅读1分钟

这里给出一个hero动画做法,它就是一种动画转场

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            Navigator.of(context).push(
              MaterialPageRoute(builder: (_) => DetailPage()),
            );
          },
          child: Hero(
            tag: 'imageHero',
            child: Image.network(
              'https://picsum.photos/250?image=9',
            ),
          ),
        ),
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Page'),
      ),
      body: GestureDetector(
        onTap: () {
          Navigator.of(context).pop();
        },
        child: Hero(
          tag: 'imageHero',
          child: Image.network(
            'https://picsum.photos/500?image=9',
          ),
        ),
      ),
    );
  }
}

要全套代码请加V:sunyan414361110 一起学习flutter鸭