パッケージ、リポジトリ、アプリカテゴリを検索

flutter_flip_card のカバー
パッケージ詳細v0.0.6

flutter_flip_card

カードの裏返しアニメーションを提供するコンポーネントです。製品の詳細を非表示および表示するために使用できます。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
6780
いいね数
160
Pub ポイント
150

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

flutter pub add flutter_flip_card

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

Flutterパッケージで、カードの裏返しアニメーションを可能にし、ユーザーが製品詳細などの隠れたコンテンツをスムーズなフリップ効果で表示できるようにします。情報がレイヤー形式で表示されるインタラクティブUIに最適で、Android、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしています。このコンポーネントは軽量で簡単に統合でき、ECサイトアプリやポートフォリオ、あるいは魅力的なトランジションが必要な任意のインターフェースに適しています。

用途

  • 製品詳細の公開
  • インタラクティブな学習カード
  • ポートフォリオアイテムのショーケース
  • ゲームカードの裏返し
  • ユーザー プロファイルのトグル

主な機能

  • スムーズな裏返しアニメーション
  • カスタマイズ可能な前面と背面
  • クロスプラットフォーム対応
  • 既存のウィジェットとの簡単な統合
  • 回転方向および速度の設定可能

適している対象

  • ECアプリケーション
  • 教育アプリ
  • インタラクティブなUIプロトタイプ
  • モバイルおよびWebダッシュボード
  • ゲーム化インターフェース

注意事項

  • 低価格端末でのパフォーマンスに影響を与える可能性があります
  • 基本的なフリップ効果を超えるカスタマイズは限定的です
  • 状態管理の適切な取り扱いが必要です
  • 複雑なマルチレイヤーのアニメーションには向かない
  • シンプルで単一目的のフリップインタラクションに最適

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

flutter_flip_card

A widget that does transition between two children in a flipping manner.

FlipCard GestureFlipCard
FlipCard GestureFlipCard

How to Use

To use flutter_flip_card, first start by importing the package.

import 'package:flutter_flip_card/flutter_flip_card.dart';

Currently Available Methods

  • FlipCard A component that provides a flip card animation

  • GestureFlipCard A component that provides a gsture(Swipe) flip card animation

FlipCard

    FlipCard(
        rotateSide: RotateSide.bottom,
        onTapFlipping: false, //When enabled, the card will flip automatically when touched.
        axis: FlipAxis.horizontal,
        controller: con1,
        frontWidget: Center(
        child: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    'image/01.png',
                    fit: BoxFit.fitHeight)
                )
            ),
        backWidget: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    `'image/02.jpg',
                    fit: BoxFit.fitHeight)
            )
        )
        
    final controller = FlipCardController();
    // Flip the card programmatically
    controller.flipcard();

GestureFlipCard

    GestureFlipCard(
            animationDuration: const Duration(milliseconds: 300),
            axis: FlipAxis.horizontal,
            controller:cong // used to ccontrol the Gesture flip programmatically
            enableController : false // if [True] if you need flip the card using programmatically
            frontWidget: Center(
                child: Container(
                  width: 300,
                  height: 200,
                  child: Image.asset(
                    'image/011.jpg',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            backWidget: Container(
                width: 300,
                height: 200,
                child: Image.asset(
                  'image/11.jpg',
                  fit: BoxFit.contain,
                ),
            ),
        ),
Project Created & Maintained By
Gunanithi

Passionate #Flutter, #Android Developer. #UI Designer.

linkedin medium

Notes

Please open an issue if you find any bugs.

Donate

You like the package ? Buy me a coffee :)

Buy Me A Coffee

カテゴリー

ソースリポジトリ

このパッケージを使用しているプロジェクト