パッケージ、リポジトリ、アプリカテゴリを検索

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 件

ソースリポジトリ

このパッケージを使用しているプロジェクト

データはまだありません。