vertical_card_pager

套件介紹

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

一個 Flutter 套件，讓開發者能夠建立動態且視覺上吸引人的垂直卡片翻頁器。它支援平滑捲動與互動式卡片轉換，非常適合以層疊、引人入勝的方式展示內容。專為 Android、iOS 和 Web 設計，透過優雅的動畫與響應式版面提升使用者體驗。此套件特別適用於需要沉浸式基於卡片的導航或內容呈現之應用程式。

適用情境

互動產品展示
使用者資料滑桿
內容輪播
教育類應用程式介面
媒體瀏覽體驗

主要特色

平滑的垂直卡片過渡
可自訂的卡片外觀
跨平台響應式設計
支援觸控手勢
內建動畫效果

適合對象

移動和網頁應用開發者
注重設計的應用程式
基於卡片的使用者介面實作
包含豐富視覺內容的應用程式

使用建議

可能需要對大型數據集進行性能優化
對複雜佈局的自訂有限
依賴所有平台上的穩定手勢處理

原始 README

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

Use dynamic and beautiful card view pagers to help you create great apps.

Preview

Alignment

Left	Center(Default)	Right

Installing

Add dependency to pubspec.yaml

Get the latest version in the 'Installing' tab on pub.dartlang.org

dependencies:
    vertical_card_pager: ^1.6.0

Import the package

import 'package:vertical_card_pager/vertical_card_pager.dart';

Adding VerticalCardPager

With optional parameters

  @override
  Widget build(BuildContext context) {
    final List<String> titles = ["RED", "YELLOW", "BLACK", "CYAN", "BLUE", "GREY", ];

    final List<Widget> images = [
      Container(
        color: Colors.red,
      ),
        Container(
        color: Colors.yellow,
      ),
        Container(
        color: Colors.black,
      ),
        Container(
        color: Colors.cyan,
      ),
        Container(
        color: Colors.blue,
      ),
        Container(
        color: Colors.grey,
      ),
    ];
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            Expanded(
              child: Container(
                child: VerticalCardPager(
                  titles: titles,  // required
                  images: images,  // required
                  textStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.bold), // optional
                  onPageChanged: (page) { // optional
                  },
                  onSelectedItem: (index) { // optional
                  },
                  initialPage: 0, // optional
                  align : ALIGN.CENTER, // optional
                  physics : ClampingScrollPhysics() // optional 
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

How to use

Check out the example app in the example directory or the 'Example' tab on pub.dartlang.org for a more complete example.

Example on Web

https://origogi.github.io/Vertical_Card_Pager/#/

Reference

This package's animation is inspired from from this Dribbble art.

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

安裝套件