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

はじめに

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

何作った？

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

パッケージの概要

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

主な特徴：

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

デモっぽいなにか

実装のポイント

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

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

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

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

  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に依存関係を追加します：

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

2 . 基本的な使用例：

import 'package:holo_card_effect/holo_card_effect.dart';

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

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

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

まとめ

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

GitHubリポジトリ

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

宣伝

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

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

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

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

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

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

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

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

良かったら、ツイッター (derorian41)フォローしてやってください。