Flutterでポケポケみたいなカード風エフェクトのパッケージつくってみた

## はじめに

こんにちは。現在いろいろあってニート生活をしているあちらて([@derorian41](https://x.com/derorian41))です。
ずっとアプリ開発をやっているつもりですがなかなかリリースしてません（あれ？おかしいな・・・💦）

## 何作った？

今回は、Flutterでもポケポケっぽいカードつくってみてぇ〜と思い、カードに光沢効果を実装するパッケージ「holo_card_effect」を作成しました。


## パッケージの概要
このパッケージは、トレーディングカードやメンバーシップカードなどのUIに、美しいホログラム効果を簡単に実装できるようにするものです。
デバイスの傾きに応じて変化する光沢効果により、リアルなホログラムカードの見た目になります！（たぶん）

主な特徴：
- 傾きに応じて変化するホログラム効果
- カスタマイズ可能な光沢エフェクト✨️
- シンプルな実装で美しい視覚効果を実現👀

## デモっぽいなにか

https://x.com/derorian41/status/1870815068381958460

## 実装のポイント

### 1. ホログラム効果の実装

ホログラム効果は、複数のレイヤーを重ねることで実装してまっす：

1. 基本的な光沢効果
2. プラスチック光沢効果💳️
3. エッジハイライト
4. キラキラエフェクト✨️
5. ホログラムパターン
6. 虹色エフェクト🌈

例えば、虹色エフェクトは以下のように実装しています：

```dart
  Widget _buildRainbowEffect() {
    return ShaderMask(
      shaderCallback: (bounds) => LinearGradient(
        colors: [
          const Color(0xFFff0084)
              .withOpacity(0.35 * ((_rotationY.abs() + _rotationX.abs()) / 70)),
          const Color(0xFFfca400)
              .withOpacity(0.3 * ((_rotationY.abs() + _rotationX.abs()) / 70)),
          const Color(0xFFffff00)
              .withOpacity(0.25 * ((_rotationY.abs() + _rotationX.abs()) / 70)),
          const Color(0xFF00ff8a)
              .withOpacity(0.25 * ((_rotationY.abs() + _rotationX.abs()) / 70)),
          const Color(0xFF00cfff)
              .withOpacity(0.3 * ((_rotationY.abs() + _rotationX.abs()) / 70)),
          const Color(0xFFcc4cfa)
              .withOpacity(0.35 * ((_rotationY.abs() + _rotationX.abs()) / 70)),
        ],
        begin: Alignment(
          -1.2 + (_rotationY / 35),
          -1.2 + (_rotationX / 35),
        ),
        end: Alignment(
          1.2 + (_rotationY / 35),
          1.2 + (_rotationX / 35),
        ),
      ).createShader(bounds),
      blendMode: BlendMode.overlay,
      child: Container(
        decoration: BoxDecoration(
          gradient: RadialGradient(
            center: Alignment(
              (_rotationY / 35),
              (_rotationX / 35),
            ),
            focal: Alignment(
              (_rotationY / 70),
              (_rotationX / 70),
            ),
            colors: [
              Colors.white.withOpacity(0.4),
              Colors.transparent,
            ],
            stops: const [0.0, 0.9],
          ),
        ),
      ),
    );
  }
```

### 2. カスタマイズ可能なプロパティ
ユーザーが必要な効果のみを選択できるよう、以下のプロパティを用意しました：

- showGlitter: キラキラエフェクトの表示
- showHolo: ホログラムエフェクトの表示
- showRainbow: 虹色エフェクトの表示
- showShadow: 影の表示
- showGloss: 光沢エフェクトの表示

## パッケージ導入方法とか使い方

1 . まず、pubspec.yamlに依存関係を追加します：

```yaml
dependencies:
  holo_card_effect:
    git:
      url: https://github.com/oh-yeah-sea-kit2/holo_card_effect.git
      ref: develop
```

2 . 基本的な使用例：

```dart
import 'package:holo_card_effect/holo_card_effect.dart';

HoloCard(
  imageUrl: 'assets/card_image.png',
  width: 300,
  height: 420,
)
```

3 . エフェクトをカスタマイズする場合：

```dart
HoloCard(
  imageUrl: 'assets/card_image.png',
  width: 300,
  height: 420,
  showGlitter: true,
  showHolo: true,
  showRainbow: true,
  showShadow: true,
  showGloss: true,
)
```

## まとめ
このパッケージを使用することで、某ポケポケっぽいカードをFlutterアプリに実装することができます！わーい🙌

## GitHubリポジトリ

スターをしてくださると泣いて喜びます😭

https://github.com/oh-yeah-sea-kit2/holo_card_effect

## 宣伝

ここまで読んでいただきありがとうございます。

わたしは「網膜色素変性症」という進行性の難病を抱えながらエンジニアをしています。この病気は、**視野が徐々に狭くなり、夜盲や視力が極端に低下する**のが特徴で、進行すると**視力を失う可能性**もあります。

現状ではなんとか開発を続けられていますが、数年後には満足にコードを書くことができなくなる恐れも…。

しかし、再生医療の進歩によって治療の可能性が見えてきました。現在、**iPS細胞による網膜再生医療の実用化**のクラウドファンディングが行われています。この取り組みが成功すれば、同じ病気で悩む多くの人にとって大きな希望となるはずです。

https://readyfor.jp/projects/kobe-eye-center-cf2024?sns_share_token=dde368a890bce7db5447&utm_source=pj_share_url&utm_medium=social

もし少しでもご興味を持っていただけて、見てもらえるとうれしいです🙏

## ここまで読んでくれた方へ

以上、Flutterでﾎﾟｹﾎﾟｹみたいなカード風エフェクトのパッケージつくってみた話でした。
ここまで読んでくださりありがとうございます。

いいねやコメント、Twitterでの共有などをしてくださるととてーもうれしいです。

良かったら、ツイッター ([derorian41](https://x.com/derorian41))フォローしてやってください。