カテゴリー・パッケージ・リポジトリを検索

パッケージ詳細v1.0.1

flip_panel

組み込みアニメーション付きのフリップパネル用パッケージ

30日間ダウンロード
224
いいね数
112
Pub ポイント
30

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

flutter pub add flip_panel

パッケージ概要

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

Flip Panel は、組み込みのトランジションを備えた滑らかでアニメーション付きのフリップパネルウィジェットを提供するFlutterパッケージです。開発者が前面と背面の間で切り替わるインタラクティブなカード型インターフェースを作成できるようにし、追加情報やコンテンツレイヤーを表示するのに適しています。カスタマイズ可能なアニメーションをサポートしており、シンプルさとパフォーマンスを重視して設計されています。プロフィールカード、製品詳細、教育ツールなど、動的な視覚フィードバックが必要なアプリインターフェースに特に役立ちます。

用途

  • インタラクティブカードインターフェース
  • 製品詳細表示
  • 教育用フラッシュカード
  • プロフィールカードの裏返し
  • ダイナミックUIのトランジション

主な機能

  • 内蔵のフリップアニメーション
  • カスタマイズ可能な前面および背面のコンテンツ
  • スムーズなトランジション効果
  • 既存のウィジェットとの簡単な統合
  • 軽量でパフォーマンスに優れる

適している対象

  • インタラクティブなUIを構築する開発者
  • カードの裏返し操作が必要なアプリ
  • 教育またはゲームアプリケーション
  • シンプルながらも魅力的なアニメーション

注意事項

  • 2Dのフリップのみ対応
  • 複雑な3D変換のサポートなし
  • 状態管理を手動で処理する必要があります
  • 高周波の切り替えには最適化されていません
  • 組み込みのジェスチャー認識なし

元の README

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

Flip Panel

pub package

A package for flip panel with built-in animation

How to use

import 'package:flip_panel/flip_panel.dart';

Create a flip panel from iterable source:

final digits = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];

FlipPanel.builder(
    itemBuilder: (context, index) => Container(
       color: Colors.black,
       padding: const EdgeInsets.symmetric(horizontal: 6.0),
       child: Text(
         '${digits[index]}',
         style: TextStyle(
             fontWeight: FontWeight.bold,
             fontSize: 50.0,
             color: Colors.white),
       ),
     ),
    itemsCount: digits.length,
    period: const Duration(milliseconds: 1000),
    loop: 1,
)

Create a flip panel from stream source:

FlipPanel<int>.stream(
      itemStream: Stream.periodic(Duration(milliseconds: 1000), (count) => count % 10),
      itemBuilder: (context, value) => Container(
        color: Colors.black,
        padding: const EdgeInsets.symmetric(horizontal: 6.0),
        child: Text(
          '$value',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 50.0,
            color: Colors.white
          ),
        ),
      ),
      initValue: 0,
  );

カテゴリー

ソースリポジトリ

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

データはまだありません。