[Flutter] FlipCardを使ってカード型のWidgetを回転させてみる

やりたいこと

カード型のWidgetをタップするといい具合にアニメーションつけて裏側を表示するように回転したい。

使用したライブラリ

flip_card

pub get

1. pubspec.yamlに「flip_card: ^0.4.4」を追記してflutter pub getする
2. dartソースにimport 'package:flip_card/flip_card.dart';を追記する

実装

FlipCard(
  front: Card(...), // カード前面に表示するWidget
  back: Card(...), // カード背面に表示するWidget
  direction: FlipDirection.HORIZONTAL, // カード回転向き(HORIZONTAL:横<デフォルト>, VERTICAL:縦)
  flipOnTouch: true, // タッチ可否(true:カード部タップで回転する<デフォルト>, false:タップしても回転しない)
  speed: 500, // 回転スピード(500ミリ秒<デフォルト>)
  onFlip: () {}, // タップイベント
  onFlipDone: (isFront) {}, // タップイベント(前面かどうかbool値で判断できる) 
)

サンプル

横回転

縦回転

実装サンプル

(おまけ)カード部分をタップではなくアイコンなどの別Widgetをタップすると回転するようにしたい

GlobalKeyを設定してtoggleCardメソッドを実行する。

final cardKey = GlobalKey<FlipCardState>();

FlipCard(
  key: cardKey, // キーを設定
  front: Card(
    child: IconButton(
      icon: Icon(Icons.compare_arrows),
      onPressed: () => cardKey.currentState.toggleCard(), // 回転イベント実行
    )
  )
)