在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, ), ), ),
結論
我們已經通過幾個在應用程序中實現翻轉效果的示例。
到此這篇關於在Flutter中制作翻轉卡片動畫的文章就介紹到這瞭,更多相關Flutter翻轉卡片動畫內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Flutter Component動畫的顯和隱最佳實踐
- Flutter給控件實現鉆石般的微光特效
- Flutter懸浮按鈕FloatingActionButton使用詳解
- Flutter加載圖片的多樣玩法匯總
- Android Flutter制作一個修改組件屬性的動畫