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

profile_photo 표지
패키지 상세v1.0.3

profile_photo

배지가 있는 프로필 사진을 표시하는 간단한 Flutter 패키지

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
108
좋아요
13
Pub 점수
160

패키지 설치

flutter pub add profile_photo

패키지 개요

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

옵션의 배지가 있는 프로필 사진을 표시하도록 설계된 가벼운 플러터 패키지입니다. 앱 내 사용자 아바타 통합을 간소화하며 다양한 이미지 소스를 지원하고 깔끔하고 사용자 정의 가능한 인터페이스를 제공합니다. 배지 기능은 상태, 알림 또는 사용자 역할을 나타내는 데 이상적입니다. 안드로이드, iOS, 웹, macOS, 윈도우, 리눅스 등 모든 주요 플랫폼에서 호환되며 일관된 외관을 보장합니다. 채팅 인터페이스, 사용자 프로필 및 소셜 기능에 적합합니다.

사용 사례

  • 사용자 프로필 표시
  • 채팅 인터페이스
  • 소셜 미디어 앱
  • 알림 표시기
  • 팀원 목록

주요 기능

  • 배지 지원
  • 크로스 플랫폼 호환성
  • 간단한 API
  • 사용자 정의 스타일
  • 이미지 소스 유연성
  • 반응형 디자인

적합한 대상

  • 모바일 앱 개발자
  • 웹 애플리케이션 제작자
  • 채팅 애플리케이션 빌더
  • 소셜 네트워킹 프로젝트
  • UI 컴포넌트 라이브러리

고려 사항

  • 기본 아바타 렌더링에 제한됨
  • 내장된 이미지 캐시 없음
  • 이미지 로딩 오류를 수동으로 처리해야 합니다
  • 대규모 아바타 그리드에 최적화되지 않음

원본 README

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

profile_photo

Creates a widget that was designed to be used to display a profile photo, but it could also be used in many other ways

Features

  • Ability to add a custom badge to the widget, could be used to display premium users for example
  • Will automatically figure out a users initals to display if no image is given, but a name is
  • ImageProvider as an image source to use either network or asset images
  • onTap and onLongPress call backs
  • Adjustable size
  • Adjustable corner radius
  • Adjustable outline width
  • Adjustable background and outline colors

Getting started

Add the dependency and add anywhere in widget tree

Usage

Minimum required code for a simple round photo (2nd example)

ProfilePhoto(
    totalWidth: 100,
    cornerRadius: 80,
    color: Colors.blue,
    image: const AssetImage('assets/test_profile_photo.jpg'),
),

More complicated example with initals shown, custom boarder and colors, and badge (3rd example)

ProfilePhoto(
    totalWidth: 200,
    cornerRadius: 25,
    color: Colors.blue,
    outlineColor: Colors.red,
    outlineWidth: 10,
    textPadding: 10,
    name: 'Brad Varnum',
    fontColor: Colors.white,
    nameDisplayOption: NameDisplayOptions.initials,
    fontWeight: FontWeight.w100,
    showName: true,
    image: const AssetImage('assets/test_profile_photo.jpg'),
    badgeAlignment: Alignment.bottomLeft,
    badgeSize: 60,
    badgeImage: const AssetImage('assets/star.png'),
    onTap: () {
        // open profile for example
    },
    onLongPress: () {
        // popup to message user for example
    },
),
example image

Additional information

  • Feel free to use as-is or fork and modify for what you need
  • If you find any issues, please create a issue in this repo
  • If you have any suggestions or feature requests, please create an issue
  • I made this mostly for fun, and explore the package creation process

카테고리

소스 저장소

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

아직 데이터가 없습니다.