parallax_cards

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

ParallaxCards 是一個 Flutter 套件，可讓您在應用程式中實現流暢的捲動視差效果與可自訂的卡片覆蓋。它透過創造動態且視覺上吸引人的卡片過渡效果來提升使用者參與度，讓使用者在瀏覽內容時獲得更豐富的互動體驗。適用於幻燈片、封面流或互動式相簿，支援 Android、iOS、macOS、Windows 與 Linux 多個平台。此套件允許開發者輕鬆自訂卡片外觀、深度與動畫行為。僅需透過 pub add 進行最少設定，即可順利整合至現有的 Flutter 專案中。

適用情境

互動產品展示
動態圖像滑塊
引人入勝的入門畫面
視覺數據儀表板
行動應用導航介面

主要特色

流暢的視差捲動
可自定義的卡片疊加
跨平台支援
與 pub 的輕鬆整合
可設定的深度和動畫
響應式設計處理

適合對象

開發互動式 UI 的開發者
尋求視覺深度的設計師
內容豐富的輪播圖應用
需要引人入勝的滾動效果的專案
Flutter 初學者探索動畫

使用建議

可能影響低端裝置的效能
需要仔細調整動畫參數
除了基本範例外，文件有限
未針對超大資料集進行優化
最適合中等數量的卡片

原始 README

以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。

Parallax Cards

A Flutter package for scrolling parallax effect and custom card overlays

Getting started

1. Depend on it

Add this to your package's pubspec.yaml file:

dependencies:
  parallax_cards: ^1.0.1

2. Install it

Install it from the command line:

$ flutter pub get

3. Import it

Now in your project you can use:

import 'package:parallax_cards/parallax_cards.dart';

Usage

ParallaxCards is a Stateless Widget which you can include in your widget tree. You can use it either vertically or horizontally by overriding the scrollDirection property:

Horizontal scroll view

ParallaxCards(
  scrollDirection: Axis.horizontal,
  imagesList: imagesList,
  width: 250,
  height: 350,
  onTap: (index) {
    log('$index pressed');
  },
),

Vertical scroll view

You can customize the card overlays according to your preferences by overriding the overlays property. However, ensure that the lengths of imageList and overlays are equal.

ParallaxCards(
                imagesList: imagesList,
                width: double.infinity,
                height: 200,
                onTap: (index) {
                  ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                    content: Text("$index tapped"),
                    duration: const Duration(milliseconds: 500),
                  ));
                },
                overlays: [
                  for (var title in titlesList)
                    Stack(
                      children: [
                        Positioned.fill(
                          child: DecoratedBox(
                            decoration: BoxDecoration(
                              gradient: LinearGradient(
                                colors: [
                                  Colors.transparent,
                                  Colors.black.withOpacity(0.8)
                                ],
                                stops: const [0.5, 0.9],
                                begin: Alignment.topCenter,
                                end: Alignment.bottomCenter,
                              ),
                            ),
                          ),
                        ),
                        Positioned(
                          left: 16,
                          bottom: 12,
                          child: Text(
                            title,
                            style: const TextStyle(
                                fontSize: 22,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        ),
                      ],
                    )
                ],
              ),

Additional information

Feel free to open an issue if you encounter any bugs or challenges. Pull requests are welcome!

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

安裝套件