搜尋套件、儲存庫與 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 項

原始碼儲存庫

使用此套件的專案

暫無相關資料。