flutter pub add flip_card根據套件公開資料產生的選型評估，僅供參考。
FlipCard 是一個 Flutter 套件，可實現流暢的翻轉卡片動畫，非常適合揭露額外資訊，例如產品細節。它支援互動式翻轉，並可自訂前後卡片元件，是打造吸引人的使用者介面的理想選擇。此套件可在 Android、iOS、Web、macOS、Windows 與 Linux 等所有主要平台運作，確保行為一致。透過 pub add 簡單整合，即可提升 UI 互動性，無需複雜操作。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
A component that provides a flip card animation. It could be used for hiding and showing details of a product.
Import the package
import 'package:flip_card/flip_card.dart';
Create a flip card as shown below. By default the card is touch controlled.
You can turn off touch control by setting flipOnTouch to false.
FlipCard(
fill: Fill.fillBack, // Fill the back side of the card to make in the same size as the front.
direction: Axis.horizontal, // default
initialSide: CardSide.front, // The side to initially display.
front: Container(
child: Text('Front'),
),
back: Container(
child: Text('Back'),
),
)
To control the card programmatically, you can pass a controller when creating the card.
late FlipCardController _controller = FlipCardController();
@override
Widget build(BuildContext context) {
return FlipCard(
controller: _controller,
front: ...,
back: ...,
);
}
void doStuff() {
// Flip the card a bit and back to indicate that it can be flipped (for example on page load)
_controller.hint(
duration: const Duration(milliseconds: 400),
);
// Tilt the card a bit (for example when hovering)
_controller.skew(0.2);
// Flip the card programmatically
_controller.flip();
// Flip the card to front specifically
_controller.flip(CardSide.front);
// Flip the card without animation
_controller.flipWithoutAnimation();
}
You can also control the card via a global key as shown below.
This is not the recommended way.
final cardKey = GlobalKey<FlipCardState>();
@override
Widget build(BuildContext context) {
return FlipCard(
key: cardKey,
flipOnTouch: false,
front: Container(
child: RaisedButton(
onPressed: () => cardKey.currentState.toggleCard(),
child: Text('Toggle'),
),
),
back: Container(
child: Text('Back'),
),
);
}
You can auto-flip the widget after a certain delay without any external triggering.
FlipCard(
fill: Fill.back, // Fill the back side of the card to make in the same size as the front.
direction: Axis.horizontal, // default
initialSide: CardSide.front, // The side to initially display.
front: Container(
child: Text('Front'),
),
back: Container(
child: Text('Back'),
),
autoFlipDuration: const Duration(seconds: 2), // The flip effect will work automatically after the 2 seconds
)