패키지, 저장소 및 앱 카테고리 검색

image_stack 표지
패키지 상세v2.1.1

image_stack

image_stack은 플러터에서 이미지 스택을 생성하기 위한 순수한 다트 패키지입니다. 이 패키지는 필요에 따라 쉽게 이미지 스택을 만들 수 있는 위젯을 제공합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
3.3천
좋아요
158
Pub 점수
150

패키지 설치

flutter pub add image_stack

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

image_stack은 Flutter용 순수 Dart 패키지로, 여러 프로필 사진이나 아바타를 계층 형식으로 표시하는 데 이상적인 이미지 스택을 쉽게 만들 수 있는 위젯을 제공합니다. Android, iOS, Web, macOS, Windows, Linux 등 다양한 플랫폼을 지원합니다. 가볍고 단순성에 초점을 맞춘 설계로, 복잡한 설정 없이 채팅 헤드 또는 팀 구성원 표시와 같은 시각적 그룹화를 빠르게 구현할 수 있습니다.

사용 사례

  • 채팅 인터페이스에서 그룹 아바타 표시
  • 팀 또는 그룹 프로필용 프로필 사진 스택 만들기
  • 협업 앱에서 사용자 존재 감시 시각화
  • 계층화된 아바타 디자인으로 UI 개선
  • 소셜 미디어 프로필 섹션 구축
  • 실시간 애플리케이션에서 연결된 사용자 표시

주요 기능

  • 간단한 위젯 기반 구현
  • 다중 플랫폼 배포를 지원합니다
  • 사용자 정의 가능한 레이어링 및 간격
  • 가볍고 종속성 없음
  • pub add를 통한 간편한 통합
  • 기기 간 반응형 디자인

적합한 대상

  • 채팅 또는 소셜 앱을 구축하는 플러터 개발자
  • 시각적 아바타 그룹화가 필요한 디자이너
  • 사용자 존재 표시기 필요 앱
  • 깨끗하고 미니멀한 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

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트