[Flutter]フリップカードアニメーション

Flutter

2021.10.15

どうも、ちょげ(@chogetarou)です。

カードをクルッと裏返すフリップカードアニメーションをする方法を紹介します。

方法
まとめ

方法

フリップカードアニメーションをするには、「flip_card」パッケージのFlipCardを使います。

パッケージの導入

「pubspec.yaml」ファイルに以下のコードを追加し、「pub get」します。

dependencies:
  flip_card: ^0.6.0

そして、ファイルでインポートします。

import 'package:flip_card/flip_card.dart';

使用

FlipCardを使うには、次の３つの引数を指定します。

key : カードを回転するためのキー
front：カード表面のウェジェット
back : カード裏面のウェジェット

カードが回転すると、frontとbackのウェジェットが切り替わります。

keyには、以下のFlipCard用のキーを指定します。

GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

回転する際には、キーのtoggleCardメソッドを呼び出します。

cardKey.currentState!.toggleCard()

使用例

  GlobalKey<FlipCardState> cardKey = GlobalKey<FlipCardState>();

  @override
  Widget build(BuildContext context) {
    return Center(
      child: FlipCard(
        key: cardKey,
        flipOnTouch: false,
        front: InkWell(
          onTap: () => cardKey.currentState!.toggleCard(),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
        back: InkWell(
          onTap: () => cardKey.currentState!.toggleCard(),
          child: Container(
            width: 200,
            height: 200,
            color: Colors.blue,
          ),
        ),
      ),
    );
  }