Search packages, repositories and app categories

ducafecatFlutter ecosystem guide
avatar_view cover
Package detailsv1.0.1

avatar_view

A new Flutter application.

AndroidiOSWebmacOSWindowsLinux
pub.dev API documentation Source code
30-day downloads
127
Likes
24
Pub points
95

Install package

flutter pub add avatar_view

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

AvatarView is a Flutter package designed to display avatars with customizable styles, supporting various shapes, borders, and image sources. It enables developers to create profile pictures, chat heads, or user icons with ease, offering flexibility in appearance and behavior. The package integrates seamlessly across multiple platforms including Android, iOS, Web, macOS, Windows, and Linux. It supports both network and local images, with options for placeholders and loading states. Ideal for social apps, messaging interfaces, and user profiles, AvatarView enhances UI consistency and visual appeal.

Use cases

  • User profile displays
  • Chat head components
  • Social media interfaces
  • Dashboard user cards
  • Authentication screens
  • Team member lists

Key features

  • Customizable shapes (circle, square)
  • Border styling and color options
  • Support for network and local images
  • Placeholder and loading indicators
  • Responsive design across platforms
  • Easy integration with existing Flutter projects

Suitable for

  • Social networking apps
  • Messaging applications
  • User dashboard UIs
  • Team collaboration tools
  • Profile management screens
  • Cross-platform mobile and web apps

Considerations

  • Requires proper image URL handling
  • May need custom logic for dynamic avatar updates
  • Limited built-in animation features
  • Depends on external image loading libraries
  • Not optimized for very large avatar collections
  • Best used with caching for performance

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

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.

Table of contents

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

Categories

Avatar, Profile Picture & Chat Heads

Dependencies

Dependency list 2 items

Source repository

Projects using this package

No data available yet.