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

image_stack のカバー
パッケージ詳細v2.1.1

image_stack

image_stack は、Flutterで画像スタックを作成するための純粋なDartパッケージです。このパッケージでは、ご要望に応じて簡単に画像スタックを作成できるウィジェットを提供しています。

AndroidiOSWebmacOSWindowsLinux
30日間ダウンロード
3330
いいね数
158
Pub ポイント
150

パッケージをインストール

flutter pub add image_stack

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

image_stack は、Flutter用の純粋なDartパッケージで、画像スタックを簡単に作成できるウィジェットを提供しています。複数のプロフィール画像やアバターをレイヤード形式で表示するのに最適です。Android、iOS、Web、macOS、Windows、Linuxなど、さまざまなプラットフォームをサポートしています。軽量でシンプルさを重視した設計により、複雑な設定なしにチャットヘッドやチームメンバー表示などの視覚的グループ化を迅速に実装できます。

用途

  • チャットインターフェースでグループアバターを表示する
  • チームまたはグループのプロフィール用にプロフィール画像スタックを作成する
  • 共同作業アプリにおけるユーザーの存在状態の可視化
  • レイヤードアバター設計によるUIの向上
  • ソーシャルメディアプロフィールセクションの構築
  • リアルタイムアプリケーションで接続中のユーザーを表示する

主な機能

  • シンプルなウィジェットベースの実装
  • 複数のプラットフォームへのデプロイをサポート
  • カスタマイズ可能なレイヤーの重ね方と間隔
  • 軽量で依存関係なし
  • pub add を通じた簡単な統合
  • デバイス間での応答性デザイン

適している対象

  • チャットやソーシャルアプリを構築するFlutter開発者
  • 視覚的なアバターのグループ化が必要なデザイナー
  • ユーザー存在インジケーターを必要とするアプリ
  • クリーンでミニマルなUIコンポーネントに焦点を当てたプロジェクト
  • 共同作業またはコミュニティプラットフォームを構築するチーム

注意事項

  • 基本的なスタックに限定;高度なアニメーションなし
  • 動的ロードやエラー処理の組み込みサポートなし
  • 画像のソースを手動で管理する必要があります
  • 非常に大きな画像セットには最適化されていません
  • 小規模なグループ(3〜6枚の画像)に最適
  • 複雑なレイアウトには追加のスタイルが必要になる場合があります

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

image_stack

image_stack is a pure dart package for creating image stack in Flutter. This package give you a widget to easily create image stack for your need.

UI created by this package is mainly found in profile picture stacks in so many apps but it can be used at any place where you feel it will look good.

Pub Package: image_stack

Medium Article: Building profile image stack in Flutter

Installation

In the dependencies: section of your pubspec.yaml, add the following line:

image_stack: <latest_version>

Usage

import 'package:image_stack/image_stack.dart';

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    List<string> images = ["image1Link", "image2Link", "image3Link", "image4Link"];
    return ImageStack(
            imageList: images,
            totalCount: images.length // If larger than images.length, will show extra empty circle
            imageRadius: 25, // Radius of each images
            imageCount: 3, // Maximum number of images to be shown in stack
            imageBorderWidth: 3, // Border width around the images
        );
  }
}

Example

View the Flutter app in the example directory.

Screenshot

Image Stack Screenshot

Contributors

カテゴリー

ソースリポジトリ

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