avatar_view

패키지 개요

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

AvatarView는 사용자 정의 가능한 스타일로 아바타를 표시하도록 설계된 Flutter 패키지로, 다양한 형태, 테두리 및 이미지 소스를 지원합니다. 개발자가 프로필 사진, 채팅 헤드 또는 사용자 아이콘을 쉽게 만들 수 있도록 하며, 외관과 동작에 유연성을 제공합니다. Android, iOS, Web, macOS, Windows, Linux 등 여러 플랫폼에서 원활하게 통합됩니다. 네트워크 이미지와 로컬 이미지를 모두 지원하며, 자리표시자 및 로딩 상태 옵션도 제공합니다. 소셜 앱, 메시징 인터페이스, 사용자 프로필에 적합하며 UI 일관성과 시각적 매력을 향상시킵니다.

사용 사례

사용자 프로필 표시
채팅 헤드 구성 요소
소셜 미디어 인터페이스
대시보드 사용자 카드
인증 화면
팀원 목록

주요 기능

사용자 정의 가능한 형태(원형, 사각형)
테두리 스타일 및 색상 옵션
네트워크 및 로컬 이미지 지원
플레이스홀더 및 로딩 표시기
다양한 플랫폼 간 반응형 디자인
기존 Flutter 프로젝트와의 간편한 통합

적합한 대상

소셜 네트워킹 앱
메시징 애플리케이션
사용자 대시보드 UI
팀 협업 도구
프로필 관리 화면
크로스플랫폼 모바일 및 웹 앱

고려 사항

올바른 이미지 URL 처리가 필요합니다
동적 아바타 업데이트를 위해 사용자 정의 로직이 필요할 수 있습니다
제한된 내장 애니메이션 기능
외부 이미지 로딩 라이브러리에 의존합니다
매우 큰 아바타 컬렉션에 최적화되지 않음
성능을 위해 캐싱과 함께 사용하는 것이 가장 좋습니다

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

Flutter AvatarView

AvatarView is a library which will help developers to create circular as well as rectangular avatar(Using Network path or Assets path) which includes some key features.

✨ Features

Circular AvatarView Without Border


       AvatarView(
                  radius: 60,
                  borderColor: Colors.yellow,
                  avatarType: AvatarType.CIRCLE,
                  backgroundColor: Colors.red,
                  imagePath:
                  "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
                  placeHolder: Container(
                    child: Icon(Icons.person, size: 50,),
                  ),
                  errorWidget: Container(
                    child: Icon(Icons.error, size: 50,),
                  ),
                ),

Circular AvatarView With Border

       AvatarView(
                  radius: 60,
                  borderWidth: 8,
                  borderColor: Colors.yellow,
                  avatarType: AvatarType.CIRCLE,
                  backgroundColor: Colors.red,
                  imagePath:
                      "https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?cs=srgb&dl=pexels-pixabay-415829.jpg",
                  placeHolder: Container(
                    child: Icon(Icons.person, size: 50,),
                  ),
                  errorWidget: Container(
                    child: Icon(Icons.error, size: 50,),
                  ),
                ),

Rectangular AvatarView Without Border

       AvatarView(
                  radius: 60,
                  borderColor: Colors.grey,
                  avatarType: AvatarType.RECTANGLE,
                  backgroundColor: Colors.red,
                  imagePath:
                  "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
                  placeHolder: Container(
                    child: Icon(Icons.person, size: 50,),
                  ),
                  errorWidget: Container(
                    child: Icon(Icons.error, size: 50,),
                  ),
                ),

Rectangular AvatarView With Border

       AvatarView(
                  radius: 60,
                  borderWidth: 8,
                  borderColor: Colors.grey,
                  avatarType: AvatarType.RECTANGLE,
                  backgroundColor: Colors.red,
                  imagePath:
                  "https://images.pexels.com/photos/220453/pexels-photo-220453.jpeg?cs=srgb&dl=pexels-pixabay-220453.jpg",
                  placeHolder: Container(
                    child: Icon(Icons.person, size: 50,),
                  ),
                  errorWidget: Container(
                    child: Icon(Icons.error, size: 50,),
                  ),
                ),

Please refer examples under example packabge.

Don't forget to star⭐ /like and contribute if you want.

Requirements

Any Operating System (ie. MacOS X, Linux, Windows)
Any IDE with Flutter SDK installed (ie. Android Studio, VSCode etc)
A little knowledge of Dart and Flutter

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

패키지 설치