在Flutter中制作翻转卡片动画的完整实例代码
作者:Breeze_Luckly 发布时间:2023-06-23 23:31:21
标签:flutter,翻转,卡片
前言
本文将带您了解在 Flutter 中制作翻转卡片动画的两个完整示例。第一个示例从头开始实现,第二个示例使用第三方包。闲话少说,让我们动手吧。
使用自写代码
本示例使用变换小部件创建翻转卡片效果。
预览
我们将要构建的演示应用程序显示了两张隐藏一些秘密的卡片。您可以通过按“揭示秘密” 按钮来揭开面具背后的东西。最上面的卡片展示了一个水平翻转动画,底部一张展示了一个垂直翻转动画。
完整代码
// 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.将插件添加到您的项目中:
flutter pub add flip_card
您可能需要运行:
flutter pub get
安装插件。
2.实现插件提供的FlipCard小部件:
Center(
child: FlipCard(
direction: FlipDirection.HORIZONTAL,
front: Container(
width: 300,
height: 400,
color: Colors.red,
),
back: Container(
width: 300,
height: 400,
color: Colors.blue,
),
),
),
结论
我们已经通过几个在应用程序中实现翻转效果的示例。
来源:https://juejin.cn/post/7017586962194726926
![](https://www.aspxhome.com/images/zang.png)
![](https://www.aspxhome.com/images/jiucuo.png)
猜你喜欢
- 本文介绍了Android TextView属性ellipsize多行失效的解决思路,分享给大家,具体如下:多余文字显示省略号的常规做法and
- 如图,刚开始报错获取不到bean因为配置文件1、原因一: *.properties等没有值,还是用${变量的}。获取不到,于是把所有值复制到
- 在使用NavigationPage导航的时候, 我们可以给里面添加一些功能按钮, 如下所示:<ContentPage.ToolbarI
- 1. 前言本文主要是介绍一下RocketMQ消息生产者在发送消息的时候发送失败的问题处理?这里有两个点,一个是关于消息的处理,一个是关于br
- 封装类用于阻止系统休眠的C#类。以下是代码注释的解释:DllImport("kernel32.dll"):定义了一个AP
- 用C++流成员函数put输出单个字符在程序中一般用cout和插入运算符“<<”实现输出,cout流在内存中有相应的缓冲区。有时用
- 目录创建线程管理线程销毁线程创建线程线程是通过扩展 Thread 类创建的。扩展的 Thread 类调用 Start() 方法来开
- spring 自定义让@Value解析到@Value 可以给字段赋值背景@Value通常与@PropertySource(value = “
- 本文实例为大家分享了Java实现图片旋转,供大家参考,具体内容如下方法一:普通方法实现图片旋转/** * 图像旋转  
- 前言J.U.C是java包java.util.concurrent的简写,中文简称并发包,是jdk1.5新增用来编写并发相关的基础api。j
- 目录前言线程基础1、创建线程2、暂停线程3、线程等待4、线程终止C#中的lock关键字总结前言最近由于工作的需要,一直在使用C#的多线程进行
- 这篇文章主要介绍了Mybatis一对多关联关系映射实现过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,
- 在开发时,我们会遇到文字过长,TextView不能完全展示,但又不想文字换行展示,这样有时会影响美观。这时我们就需要文字滚动播放,让用户可以
- 本文实例讲述了C#序列化与反序列化的方法。分享给大家供大家参考。具体分析如下:把“对象”转换为“字节序列”的过程称为对象的序列化。 
- 本文告诉大家如何使用相同权限调用cmd并且传入命令。如果想要用相同的权限运行一个程序,可以使用 ProcessStartInfo 的方法&n
- 1. reference:参考某一资源ID。(1)属性定义:<declare-styleable name = "名称&qu
- 1 引入 pom 包<dependency> <groupId>io.github.res
- 在生产型Android客户端软件(企业级应用)开发中,界面可能存在多个输入(EditText)和多个操作(MotionEvent和KeyEv
- 一、安装activeMQLinux环境ActiveMQ部署方法:https://www.aspxhome.com/article/16232
- 答案是能!松哥之前写过类似的文章,但是主要是讲了用法,今天我们来看看原理!本文基于当前 Spring Security 5.3.4 来分析,