2020.06.02 2020.08.10

62. Flutterライブラリflip_cardでフリップアニメーションを作ってみる

tamappe

Table of Contents

フリップアニメーションを簡単に作れる flip_card を使ってみる

今作っているナンバーズアプリでカードにアニメーションを入れたいのでアニメーションの入れ方を調査しました。
調査しているうちにシンプルなパッケージがありましたので簡単に紹介してみます。

フリップカードアニメーションを作れるflip_cardパッケージ

flip_card はフリップカードアニメーションを簡単に再現できる component です。

Dart packages
3 Pockets
flip_card | Flutter Package
https://pub.dev/packages/flip_card
A component that provides flip card animation. It could be used for hide and show details of a product.

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(),
    );
  }
}

これをビルドすると次のような画面が表示されます。