搜尋套件、儲存庫與 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

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。