CircleWebImageAppi

A widget for displaying circular web images with caching and loading states in Flutter applications.

Features

• Circular Images: Automatically clips images to circular shape
• Network Caching: Built-in image caching for better performance
• Loading States: Shows loading indicator while image loads
• Fallback Support: Default placeholder image when URL is not provided
• Customizable Size: Adjustable image dimensions

Usage

CircleWebImageAppi(
  url: 'https://example.com/profile-image.jpg',
  size: 50,
)

Parameters

Parameter	Type	Description
url	String?	URL of the image to display (optional, uses default if null)
size	double?	Diameter of the circular image (default: 30)

Examples

Basic Profile Image

CircleWebImageAppi(
  url: 'https://api.example.com/users/123/avatar',
  size: 60,
)

Small Avatar

CircleWebImageAppi(
  url: user.profileImageUrl,
  size: 32,
)

Large Profile Picture

CircleWebImageAppi(
  url: 'https://images.unsplash.com/photo-1633332755192-727a05c4013d',
  size: 120,
)

Default Placeholder

CircleWebImageAppi(
  url: null, // Will show default placeholder
  size: 40,
)

Default Behavior

• Default Size: 30x30 pixels
• Default Image: Uses a placeholder image from Unsplash when url is null
• Loading State: Shows CircleLoaderAppi while image is loading
• Caching: Automatically caches images for improved performance
• Error Handling: Falls back to placeholder on load errors

Best Practices

• Use appropriate sizes for your UI context (32px for small avatars, 60px+ for profiles)
• Provide fallback URLs or handle null cases gracefully
• Consider using smaller images for better performance
• The widget automatically handles loading states and errors