avatar_view

套件介紹

根據套件公開資料產生的選型評估，僅供參考。

AvatarView 是一個專為 Flutter 設計的套件，用於顯示可自訂樣式的頭像，支援多種形狀、邊框和影像來源。它讓開發者能輕鬆建立個人檔案圖片、聊天頭像或使用者圖示，外觀與行為皆具高度彈性。此套件可無縫整合至 Android、iOS、Web、macOS、Windows 與 Linux 等多個平台。支援網路與本機影像，並提供佔位符與載入狀態選項。適用於社交應用、訊息介面與使用者資料，AvatarView 可提升 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

搜尋套件、儲存庫與 APP 分類

安裝套件