搜尋分類、套件與程式碼儲存庫

套件詳情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,
  );

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。