super_profile_picture

패키지 개요

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

Super Profile Picture는 이미지와 텍스트 아바타를 모두 지원하는 사용자 정의 가능한 Flutter 위젯입니다. 유연한 스타일링, 모양 옵션 및 이미지가 사용 불가능할 때의 동적 백업을 제공합니다. 소셜 앱, 채팅 플랫폼 또는 대시보드에서 사용자 인터페이스에 이상적이며, 다양한 기기 간 일관된 시각적 표현을 보장합니다. 이 위젯은 Flutter 프로젝트에 원활하게 통합되며 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원합니다.

사용 사례

사용자 프로필 표시
채팅 인터페이스
대시보드 위젯
소셜 미디어 앱
팀원 목록

주요 기능

이미지 및 텍스트 아바타 지원
사용자 정의 가능한 모양과 크기
누락된 이미지에 대한 대체 텍스트
플랫폼 독립적 설계
Flutter와의 간편한 통합
반응형 레이아웃 처리

적합한 대상

소셜 앱을 개발하는 개발자
일관된 아바타가 필요한 UI 디자이너
크로스 플랫폼 호환성이 필요한 프로젝트
사용자 프로필 또는 메시징 기능이 있는 앱
재사용 가능한 아바타 컴포넌트를 원하는 팀

고려 사항

원격 URL용 이미지 로드 설정이 필요합니다
기본 아바타 기능에 제한됨
이름에서 내장된 아바타 생성 없음
복잡한 UI를 위해 추가 스타일링이 필요할 수 있습니다
외부 이미지 로딩 라이브러리에 의존합니다

원본 README

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

logo

version

A customizable Flutter widget for displaying profile pictures, supporting both image and text options. It will show label text in case the image is not provided or fails to load. You can use any image provider, such as NetworkImage, AssetImage, and more, to display the image.

Live Demo & Experiment Page

Live demo: Demo & Experiment site

Installation

i. Add the latest version of this package to your pubspec.yaml file, and run: 'dart pub get':

dependancies:
  super_profile_picture: ^1.0.0

ii. Import the package in your Flutter App and use it.

import 'package:super_profile_picture/super_profile_picture.dart';

Note

The background color will be set according to the first letter of the label. Customization of the background color is not currently supported but may be added in the future.

Code Sample

Default

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
);

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    image: NetworkImage("https://picsum.photos/200/300.jpg"),

);

Max Label Length


SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    textDecorationProperties: TextDecorationProperties(
         maxLabelLength: 3,  
    ),
);

Empty Name / Blank

SuperProfilePicture(
    label: "",
    radius: 30,
);

With Border

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    border: Border.all(width: 6, color: Colors.blue),
);

SuperProfilePicture(
    label: "Super Profile Picture",
    radius: 30,
    image: NetworkImage("https://picsum.photos/200/300.jpg"),
    border: Border.all(width: 6, color: Colors.blue),

);

Properties

label
radius
textDecorationProperties
- fontSize;
- maxLabelLength;
- useFittedBox;
- fontColor;
- fontWeight;
- letterSpacing;
- padding;
- fontStyle;
imageDecorationProperties
- frameBuilder;
- loadingBuilder;
- errorBuilder;
- semanticLabel;
- excludeFromSemantics;
- width;
- height;
- color;
- opacity;
- colorBlendMode;
- fit;
- alignment;
- repeat;
- centerSlice;
- matchTextDirection;
- gaplessPlayback;
- isAntiAlias;
- filterQuality;
border
borderRadius
image
clipBehavior

Future Tasks

Add customizable background color function.

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

패키지 설치