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.

搜索分类、插件与代码仓

安装插件