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

coverflow 封面
插件详情v2.0.3

coverflow

一个 Flutter 包项目,包含一个简单的水平覆盖流小部件。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
170
喜欢数
15
Pub 分数
130

安装插件

flutter pub add coverflow

插件介绍

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

一个 Flutter 包,提供了一个简单的水平覆盖流小部件,使用户能够通过一系列项目进行导航,并具有类似 3D 的视差效果。非常适合以视觉上引人入胜的方式展示图片、卡片或内容。该小部件支持平滑滚动和跨多个平台的响应式设计。轻量级且易于集成到现有的 Flutter 项目中。非常适合媒体画廊、产品展示或交互式滑块。

适合场景

  • 媒体画廊
  • 产品展示
  • 交互式滑块
  • 图片轮播
  • 用户入门屏幕

主要特点

  • 横向覆盖流布局
  • 3D视差效果
  • 跨平台支持
  • 简单集成
  • 响应式设计

适合对象

  • 开发视觉内容显示的开发者
  • 寻求交互式UI元素的设计师
  • 需要直观导航的项目
  • 界面中包含大量图片的应用程序
  • Web 和移动应用

使用建议

  • 可能会影响大数据集的性能
  • 有限的自定义选项
  • 最适合中等数量的项目
  • 在低端设备上需要谨慎处理
  • 不适合垂直布局

原始 README

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

Coverflow

A simple horizontal coverflow widget.

Preview

Screen Recording 2021-11-25 at 1 51 14 PM Screen Recording 2021-11-25 at 1 28 56 PM

Installation

Add coverflow: ^2.0.2 to your pubspec.yaml dependecies. And import it:

import 'package:coverflow/coverflow.dart';

How to use

Simply add a Coverflow widget with required params.

final List<String> titles = [
    "Title1",
    "Title2",
    "Title3",
    "Title4",
    "Title5",
    "Title6",
    "Title7",
    "Title8",
  ];

  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,
    ),
    Container(
      color: Colors.green,
    ),
    Container(
      color: Colors.amber,
    ),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 200,
          child: CoverFlow(
            images: images,
            titles: titles,
            textStyle: TextStyle(color: Colors.red),
          ),
        ),
      ),
    );
  }

Params

CoverFlow(
    images: images,
    titles: titles,
    displayOnlyCenterTitle: true,
    textStyle: TextStyle(color: Colors.red),
)

所属分类

依赖

依赖清单 1 项

源码仓库

使用此插件的项目

暂无相关数据。