【Flutter】flip_cardパッケージを使って画像付きの回転カードを実装する

はじめに

本記事では、flip_card パッケージを使用し、表面と裏面にそれぞれ画像を指定したカードを回転させる方法について記載します。

作るものイメージ

環境

• Flutter 3.22.1
• flip_card: 0.7.0
• vscode

パッケージのインストール

次のコマンドでflip_card パッケージをインストール。

flutter pub add flip_card

カードに表示させる画像の準備

assets ディレクトリに表示したい画像（例: FEimg.png と BEimg.png）を配置してください。
配置後にpubspec.yaml ファイルに画像のパスを追加します。

pubspec.yaml

# ... 他の設定は省略 ...
flutter:
  # ... 他の設定は省略 ...

  assets:
    - assets/FEimg.png
    - assets/BEimg.png
    - 

次のコマンドを実施します。

flutter pub get

ソース

表面（front）と裏面（back）にそれぞれ別々の画像を指定し、水平方向に切り替わるカードを作成します。

main.dart

import 'package:flutter/material.dart';
import 'package:flip_card/flip_card.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('サンプル例')),
        body: Center(
          child: FlipCard(
            direction: FlipDirection.HORIZONTAL, // FlipCardの方向を水平に設定
            front: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                image: const DecorationImage(
                  image: AssetImage('assets/FEimg.png'), // カードの表面に表示する画像を設定
                  fit: BoxFit.cover, // 画像をカード全体に合わせて表示
                ),
              ),
              width: 300,
              height: 200,
            ),
            back: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                image: const DecorationImage(
                  image: AssetImage('assets/BEimg.png'), // カードの裏面に表示する画像を設定
                  fit: BoxFit.cover, // 画像をカード全体に合わせて表示
                ),
              ),
              width: 300,
              height: 200,
            ),
          ),
        ),
      ),
    );
  }
}

実行結果

デバッグして確認すると、次のgifのように画像付きのカードを表裏切り替えることができました。

参考