前言
本文将带您了解在 Flutter 中制作翻转卡片动画的两个完整示例。第一个示例从头开始实现，第二个示例使用第三方包。闲话少说，让我们动手吧。
使用自写代码
本示例使用变换小部件创建翻转卡片效果。
预览
我们将要构建的演示应用程序显示了两张隐藏一些秘密的卡片。您可以通过按“揭示秘密” 按钮来揭开面具背后的东西。最上面的卡片展示了一个水平翻转动画，底部一张展示了一个垂直翻转动画。
完整代码
复制代码
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136// main.dart import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( // Remove the debug banner debugShowCheckedModeBanner: false, title: 'Kindacode.com', theme: ThemeData( primarySwatch: Colors.amber, ), home: HomePage()); } } class HomePage extends StatefulWidget { const HomePage({Key? key}) : super(key: key); @override _HomePageState createState() => _HomePageState(); } class _HomePageState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _animation; AnimationStatus _status = AnimationStatus.dismissed; @override void initState() { super.initState(); _controller = AnimationController(vsync: this, duration: Duration(seconds: 1)); _animation = Tween(end: 1.0, begin: 0.0).animate(_controller) ..addListener(() { setState(() {}); }) ..addStatusListener((status) { _status = status; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Kindacode.com'), ), body: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ SizedBox( height: 30, ), // Horizontal Flipping Transform( alignment: FractionalOffset.center, transform: Matrix4.identity() ..setEntry(3, 2, 0.0015) ..rotateY(pi * _animation.value), child: Card( child: _animation.value <= 0.5 ? Container( color: Colors.deepOrange, width: 240, height: 300, child: Center( child: Text( '?', style: TextStyle(fontSize: 100, color: Colors.white), ))) : Container( width: 240, height: 300, color: Colors.grey, child: Image.network( 'https://www.kindacode.com/wp-content/uploads/2021/09/girl.jpeg', fit: BoxFit.cover, )), ), ), // Vertical Flipping SizedBox( height: 30, ), Transform( alignment: FractionalOffset.center, transform: Matrix4.identity() ..setEntry(3, 2, 0.0015) ..rotateX(pi * _animation.value), child: Card( child: _animation.value <= 0.5 ? Container( color: Colors.deepPurple, width: 240, height: 300, child: Center( child: Text( '?', style: TextStyle(fontSize: 100, color: Colors.white), ))) : Container( width: 240, height: 300, color: Colors.grey, child: RotatedBox( quarterTurns: 2, child: Image.network( 'https://www.kindacode.com/wp-content/uploads/2021/09/flower.jpeg', fit: BoxFit.cover, ), )), ), ), ElevatedButton( onPressed: () { if (_status == AnimationStatus.dismissed) { _controller.forward(); } else { _controller.reverse(); } }, child: Text('Reveal The Secrets')) ], ), ), ); } }
使用第三个插件
从头开始编写代码可能既麻烦又耗时。如果您想快速而整洁地完成工作，那么使用插件中的预制小部件是一个不错的选择。下面的示例使用了一个名为flip_card的很棒的包。
编码
1.将插件添加到您的项目中：
复制代码
1flutter pub add flip_card
您可能需要运行：
复制代码
1flutter pub get
安装插件。
2.实现插件提供的FlipCard小部件：
复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15Center( child: FlipCard( direction: FlipDirection.HORIZONTAL, front: Container( width: 300, height: 400, color: Colors.red, ), back: Container( width: 300, height: 400, color: Colors.blue, ), ), ),
结论
我们已经通过几个在应用程序中实现翻转效果的示例。
到此这篇关于在Flutter中制作翻转卡片动画的文章就介绍到这了,更多相关Flutter翻转卡片动画内容请搜索靠谱客以前的文章或继续浏览下面的相关文章希望大家以后多多支持靠谱客！
最后
以上就是幸福麦片最近收集整理的关于在Flutter中制作翻转卡片动画的完整实例代码的全部内容，更多相关在Flutter中制作翻转卡片动画内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复