62. Flutterライブラリflip_cardでフリップアニメーションを作ってみる
フリップアニメーションを簡単に作れる flip_card を使ってみる
今作っているナンバーズアプリでカードにアニメーションを入れたいのでアニメーションの入れ方を調査しました。 調査しているうちにシンプルなパッケージがありましたので簡単に紹介してみます。
フリップカードアニメーションを作れるflip_cardパッケージ
flip_card はフリップカードアニメーションを簡単に再現できる component です。
Horizontal | Vertical |
---|---|
簡単に使い方を説明すると
FlipCard( direction: FlipDirection.HORIZONTAL, // default front: Container( child: Text('Front'), ), back: Container( child: Text('Back'), ), );
このように デザインは Container で作った widget を front(全面) と back (背面) に乗せるだけです。 Card と FlatButton が合体した widget みたいな印象を受けました。 ボタンタップ時の処理は onFlip のプロパティがありますのでタップイベントもハンドリングできます。
サンプルソースコード
flip_card を入れる
yaml ファイルを編集して flip_card が使える状態にします。
pubspec.yaml
dependencies: flutter: sdk: flutter cupertino_icons: ^0.1.2 flip_card: ^0.4.4
yaml ファイルでインストールに失敗するときはインデントを見直します。結構あるあるです。
パッケージをインポートする
ファイルにインポートします。
import 'package:flip_card/flip_card.dart';
今回は簡単に StatelessWidget に FlipCard を乗せました。
class FlipCardButton extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( body: Center( child: FlipCard( direction: FlipDirection.HORIZONTAL, speed: 500, // タップイベント front: Container( width: 100, height: 100, color: Colors.redAccent, child: Center(child: Text('前面')), ), back: Container( width: 100, height: 100, color: Colors.blueAccent, child: Center(child: Text('背面')), ), ), ), ); } }
main.dart にはただ FlipCardButton ウィジェットを乗せました。
main.dart
void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Numbers', theme: new ThemeData( fontFamily: 'Arial', ), home: FlipCardButton(), ); } }
これをビルドすると次のような画面が表示されます。
(はてなブログではめちゃくちゃ容量小さい gif でないとアップロードできないので動作が鈍いですが、実際は滑らかな動きです。)
これを使ってナンバーズアプリのボタンにアニメーションを入れていきます。
今日はここまでです。
それではバイバイ!