搜索分类、插件与代码仓

scaled_list 封面
插件详情v2.0.0

scaled_list

一个水平列表视图,包含大量修改,包括缩放的当前项目和弯曲的自定义绘制。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
93
喜欢数
140
Pub 分数
150

安装插件

flutter pub add scaled_list

插件介绍

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

Scaled List 是一个 Flutter 包,提供了一个水平可滚动的列表,其中当前项目具有视觉冲击力的缩放效果以及自定义的曲线绘制效果。通过大小缩放和流畅动画突出显示活动项目,从而提升用户体验,非常适合用于幻灯片或封面流界面。该包支持 Android、iOS、Web、macOS、Windows 和 Linux 多个平台,确保在不同设备上行为一致。开发者可以自定义外观和交互方式,以最少的努力实现创意 UI 设计。

适合场景

  • 创建交互式轮播
  • 设计封面流导航
  • 使用视觉焦点构建图像滑块
  • 增强产品展示
  • 实现动画水平列表
  • 在用户界面中添加动态项目缩放

主要特点

  • 缩放当前项目可视化
  • 自定义弧形画作支撑
  • 平滑的水平滚动
  • 跨平台兼容性
  • 可扩展的自定义选项
  • 内置动画过渡

适合对象

  • 寻求视觉冲击力的UI设计师
  • 开发媒体画廊的开发者
  • 需要聚焦项目高亮的应用
  • 交互式产品浏览功能
  • 带有幻灯片式导航的项目

使用建议

  • 可能需要在低端设备上进行性能调优
  • 自定义绘画可能会增加复杂性
  • 有限的垂直支持
  • 最适合水平布局
  • 大型数据集的潜在内存使用

原始 README

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

Effective Dart Badge MIT License Badge

Pub.dev

Scaled List

A Horizontal List view With Lots of modification including a scaled current item.

  • Provided with curved custom painting and Dots indictor below it.
  • it makes the widget of item builder responsive to the device screen's width and height.
  • You can also set the relative width, margin width, height of selected and unselected Card to the entire screen

Image Image Image

Usage

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ScaledList(
        itemCount: Data.categories.length,
        itemColor: (index) {
          return kMixedColors[index % kMixedColors.length];
        },
        itemBuilder: (index, selectedIndex) {
          final category = Data.categories[index];
          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                height: selectedIndex == index
                    ? 100
                    : 80,
                child: Image.asset(category.image),
              ),
              SizedBox(height: 15),
              Text(
                category.name,
                style: TextStyle(
                    color: Colors.white,
                    fontSize: selectedIndex == index
                        ? 25
                        : 20),
              )
            ],
          );
        },
      ),
    );
  }

Usage Scenarios

  • When You like to add items in scaled manner and add custom curved painting over each item.

Contributers

Hosain Mohamed Muhammad Alsaied

所属分类

源码仓库

使用此插件的项目

暂无相关数据。