搜索插件、代码仓与 APP 分类

scroll_snap_effect 封面
插件详情v0.1.0

scroll_snap_effect

一个用于创建简单滚动吸附效果的 Flutter 包

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
16
喜欢数
26
Pub 分数
150

安装插件

flutter pub add scroll_snap_effect

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 包,可简化在可滚动控件中实现滚动吸附效果。它可在滚动过程中实现平滑、精确地吸附到特定位置,非常适合创建类似幻灯片或分段滚动的界面。该包轻量且与现有 ScrollView 完美集成,为开发者提供了一种简单的方法来通过直观的导航提升用户体验。支持所有主要平台,包括 Android、iOS、Web、macOS、Windows 和 Linux。

适合场景

  • 创建幻灯片或滑块
  • 构建分段滚动界面
  • 增强入门屏幕中的导航
  • 设计带有网格对齐的图像画廊
  • 实现标签滚动视图

主要特点

  • 用于弹跳行为的简单 API
  • 支持多种滚动方向
  • 平滑的吸附动画
  • 跨平台兼容性
  • 与 ListView 和 PageView 的轻松集成
  • 可自定义的吸附间隔

适合对象

  • 开发交互式滚动界面的开发者
  • 寻求直观滚动导航的设计师
  • 需要网格对齐滚动的应用程序
  • 针对多个平台的项目
  • 希望滚动效果设置最少的团队

使用建议

  • 可能需要针对复杂布局进行调整
  • 非线性吸附的自定义选项有限
  • 未针对超大数据集进行优化
  • 最适合固定大小的项目
  • 性能可能因复杂的 widget 树而有所不同

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

cover

flutter paypal
A Flutter package to create easy animation scroll snap effect in ListView


  // Example itemSize
  // itemSize = child width (ex: 100) + child padding (ex: 16);
  // itemSize = 116
  ScrollSnapEffect(
      itemSize: 116,
      itemCount: 15,
      padding: const EdgeInsets.symmetric(horizontal: 20),
      onChanged: (index) {
        debugPrint('$index');
      },
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.only(right: 16),
          child: SizedBox(
            height: 100,
            width: 100,
            child: ColoredBox(
              color: Colors.blue,
              child: Center(
                child: Text(
                  '$index',
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 20,
                  ),
                ),
              ),
            ),
          ),
        );
      },
    ),

Example Scroll Snap Effect

output


🚧 Maintener

account avatar
Farhan Fadila
📫 How to reach me: farhan.fadila1717@gmail.com

❤️ Suport Maintener

paypal badge linktree

所属分类

源码仓库

使用此插件的项目

暂无相关数据。