搜索插件、代码仓与 APP 分类

profile_photo 封面
插件详情v1.0.3

profile_photo

一个简单的 Flutter 包,用于显示带有徽章的个人资料照片

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
108
喜欢数
13
Pub 分数
160

安装插件

flutter pub add profile_photo

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个轻量级的 Flutter 包,用于显示带有可选徽章的个人资料照片。它简化了在应用中集成用户头像的过程,支持多种图像源,并提供简洁且可自定义的界面。徽章功能非常适合用于指示状态、通知或用户角色。兼容所有主要平台,确保在 Android、iOS、Web、macOS、Windows 和 Linux 上外观一致。非常适合聊天界面、用户资料和社交功能。

适合场景

  • 用户资料展示
  • 聊天界面
  • 社交媒体应用
  • 通知指示器
  • 团队成员列表

主要特点

  • 徽章支持
  • 跨平台兼容性
  • 简单 API
  • 可自定义样式
  • 图像源灵活性
  • 响应式设计

适合对象

  • 移动应用开发者
  • Web应用程序创建者
  • 聊天应用构建器
  • 社交网络项目
  • 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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。