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 分类

安装插件