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!

搜索分类、插件与代码仓

安装插件