flutter pub add flutter_flip_card基于插件公开信息、社区数据与项目使用情况整理的选型参考。
一个 Flutter 包，可实现翻转卡片动画，让用户通过流畅的翻转效果揭示隐藏内容，例如产品详情。适用于信息分层显示的交互式 UI，支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台。该组件轻量且易于集成，适合电商应用、作品集或任何需要引人入胜过渡效果的界面。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
A widget that does transition between two children in a flipping manner.
| FlipCard | GestureFlipCard |
|---|---|
 |
 |
To use flutter_flip_card, first start by importing the package.
import 'package:flutter_flip_card/flutter_flip_card.dart';
FlipCard A component that provides a flip card animation
GestureFlipCard A component that provides a gsture(Swipe) flip card animation
FlipCard(
rotateSide: RotateSide.bottom,
onTapFlipping: false, //When enabled, the card will flip automatically when touched.
axis: FlipAxis.horizontal,
controller: con1,
frontWidget: Center(
child: Container(
height: 200,
width: 140,
child: Image.asset(
'image/01.png',
fit: BoxFit.fitHeight)
)
),
backWidget: Container(
height: 200,
width: 140,
child: Image.asset(
`'image/02.jpg',
fit: BoxFit.fitHeight)
)
)
final controller = FlipCardController();
// Flip the card programmatically
controller.flipcard();
GestureFlipCard(
animationDuration: const Duration(milliseconds: 300),
axis: FlipAxis.horizontal,
controller:cong // used to ccontrol the Gesture flip programmatically
enableController : false // if [True] if you need flip the card using programmatically
frontWidget: Center(
child: Container(
width: 300,
height: 200,
child: Image.asset(
'image/011.jpg',
fit: BoxFit.contain,
),
),
),
backWidget: Container(
width: 300,
height: 200,
child: Image.asset(
'image/11.jpg',
fit: BoxFit.contain,
),
),
),
Passionate #Flutter, #Android Developer. #UI Designer.
Please open an issue if you find any bugs.
You like the package ? Buy me a coffee :)
