Hero动画

Catalogue

效果:

代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import 'package:flutter/material.dart';
import 'package:gm_staff_module/demo/example/example_common.dart';

///hero动画
class GMExampleAnimationHeroPage extends StatefulWidget {
GMExampleAnimationHeroPage({Key key}) : super(key: key);

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

class _GMExampleAnimationHeroPageState
extends State<GMExampleAnimationHeroPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: example_common_appBar(context, "Hero动画"),
body: _buildContent(context),
);
}

Widget _buildContent(ctx) {
return GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
crossAxisSpacing: 8,
mainAxisSpacing: 8,
childAspectRatio: 2),
children: List.generate(20, (index) {
String imageURL = "https://picsum.photos/id/$index/400/200";
return GestureDetector(
onTap: () {
Navigator.of(ctx).push(PageRouteBuilder(pageBuilder:
(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation) {
return FadeTransition(
opacity: animation,
child: GMExampleAnimationHeroDetailPage(
imageURL: imageURL,
),
);
}));
},
child: Hero(
tag: imageURL,
child: Image.network(imageURL),
),
);
}),
);
}
}

///图片详情页
class GMExampleAnimationHeroDetailPage extends StatelessWidget {
final String imageURL;
GMExampleAnimationHeroDetailPage({Key key, this.imageURL}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Hero(
tag: this.imageURL,
child: Image.network(
this.imageURL,
width: double.infinity,
fit: BoxFit.cover,
),
),
),
),
);
}
}