apptomate_custom_avatar 0.0.2

A highly customizable avatar widget with multiple display options and styling capabilities.

CustomAvatar

A highly customizable avatar widget with multiple display options and styling capabilities.

Features

• Multiple Content Types:

  • Network/asset images
  • Initials text
  • Icons
  • Fallback content

• Visual Customization:

  • Adjustable size
  • Circle or rounded square shape
  • Custom borders
  • Elevation/shadow
  • Background/text colors

• Additional Elements:

  • Status badges
  • Loading indicators
  • Error handling

• Interactivity:

  • Tap callback
  • Gesture support

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_avatar: ^0.0.2

Basic Usage

// Simple avatar with image
CustomAvatar(
  imageUrl: 'https://example.com/avatar.jpg',
  size: 80,
)

// Avatar with initials
CustomAvatar(
  initials: "AB",
  backgroundColor: Colors.blue,
)

// Avatar with icon
CustomAvatar(
  icon: Icons.person,
  size: 60,
)

Complete Examples

1. Profile Avatar with Badge

CustomAvatar(
  imageUrl: 'https://github.com/username.png',
  size: 100,
  isNetworkImage: true,
  shape: AvatarShape.circle,
  showBadge: true,
  badgeColor: Colors.green,
  onTap: () => print('Profile tapped'),
)

2. Rounded Square Avatar

CustomAvatar(
  initials: "FL",
  size: 80,
  shape: AvatarShape.roundedSquare,
  borderRadius: 12,
  backgroundColor: Colors.purple,
  borderColor: Colors.deepPurple,
  borderWidth: 2,
)

3. Avatar with Loading State

CustomAvatar(
  imageUrl: 'https://example.com/large-avatar.jpg',
  loadingBuilder: (context) => CircularProgressIndicator(
    strokeWidth: 2,
    color: Colors.white,
  ),
)

Parameter Reference

Content Options

Parameter	Type	Description
imageUrl	String?	URL/path for image
initials	String?	Text initials
icon	IconData?	Icon to display
isNetworkImage	bool	Whether imageUrl is network resource

Style Options

Parameter	Type	Default	Description
size	double	50.0	Avatar diameter
backgroundColor	Color	Colors.blue	Background color
textColor	Color	Colors.white	Text/icon color
shape	AvatarShape	circle	Shape type
borderRadius	double	8.0	Corner radius (for roundedSquare)
borderColor	Color?	null	Border color
borderWidth	double	1.0	Border width
elevation	double	0.0	Shadow elevation

Badge Options

Parameter	Type	Default	Description
showBadge	bool	false	Show status badge
badgeColor	Color	Colors.green	Badge color
badgePosition	BadgePosition	bottomRight	Badge position

Interaction

Parameter	Type	Description
onTap	VoidCallback?	Tap handler

Advanced

Parameter	Type	Description
loadingBuilder	WidgetBuilder?	Custom loading widget
errorBuilder	ImageErrorWidgetBuilder?	Custom error widget

Best Practices

1. Image Handling:

   • Always provide error/loading states for network images
   • Use appropriate image sizes for avatar dimensions

2. Accessibility:

   • Ensure sufficient color contrast
   • Provide meaningful initials when no image available
   • Consider adding semantic labels

3. Performance:

   • Cache network images
   • Use appropriate image formats (WebP for smaller sizes)

4. Consistency:

   • Standardize avatar sizes across your app
   • Maintain consistent badge styling