πŸ“· reusable_image_widget

A powerful, flexible, and platform-aware Flutter image handling package that supports displaying avatars, full-screen image viewing, file/network/asset loading, and gallery saving with minimal setup.


✨ Features

  • βœ” Load images from XFile, network URLs, or asset paths
  • βœ” Auto-detect platform and image source
  • βœ” Full-screen image viewer with zoom, rotation, and hero animation
  • βœ” Circular or rectangular avatar widgets
  • βœ” Avatar with online indicator and edit support
  • βœ” Customizable placeholder and error widgets
  • βœ” Platform-aware image downloading (web, mobile, desktop)
  • βœ” Lightweight and easily composable

πŸ“‚ Installation

Add this to your pubspec.yaml:

dependencies:
  reusable_image_widget: ^latest_version

🌍 Cross-Platform Image Support

Internally detects platform and source:

  • XFile (picked files)
  • Network URL
  • Asset path (starts with assets/)

Uses:

  • FileImage / Image.file
  • NetworkImage / CachedNetworkImage
  • AssetImage
  • MemoryImage (for web)

πŸš€ Usage

1. Basic Viewer

AppImageViewer(
  imageSource: 'assets/images/profile_pic.jpeg',
)

2. From Picked File

AppImageViewer(
  pickedFile: pickedFile, // XFile
)

3. Edit Profile Image Viewer

EditProfileImageViewer(
  pickedFile: pickedFile,
  imageSource: pickedFile?.path,
  radius: 60,
  showEditIcon: true,
  onTapEdit: () => pickImage(),
)

4. Avatar With Online Indicator

AvatarWithOnlineIndicator(
  imageSource: 'https://example.com/image.jpg',
  isOnline: true,
  border: true,
  shadow: true,
  imgRadius: 50,
)

5. AppAvatar (Circle or Rectangle)

AppAvatar(
  isCircle: true,
  imageSource: 'https://example.com/image.jpg',
  radius: 48,
)

🎨 Avatar Widgets

  • AppAvatar β€” root avatar builder (circle or rectangle)
  • AppCircleAvatar
  • AppRectangleAvatar
  • EditProfileImageViewer β€” avatar with edit icon & full-screen support
  • AvatarWithOnlineIndicator β€” avatar with status badge

πŸ”„ Image Download (All Platforms)

final result = await downloadImage(
  pickedFile: pickedFile,
  imageSource: 'https://example.com/image.jpg',
);

Web Support

Web download is handled using AnchorElement and Uint8List blob download.


🎨 Customization

Each widget accepts:

  • placeholder
  • errorWidget
  • scale, fit, backgroundColor, etc.

πŸ‚ Constants & Styling

AvatarStyleConstants.defaultRadius
AvatarStyleConstants.avatarPadding

πŸŽ“ Extensions

'image.jpg'.isAssetPath // true if starts with 'assets/'

πŸ‘ Hero Support

HeroWrapper(
  tag: 'profile_pic',
  child: AppImageViewer(...),
)

⚧ Dependencies

dependency_overrides:
  cached_network_image: <latest_version>
  photo_view: <latest_version>
  image_gallery_saver_plus: <latest_version>
  permission_handler: <latest_version>

πŸ“– Example

AvatarTitleGridCard(
  title: 'Your Logo',
  imageSource: 'assets/icons/logo.jpg',
  isCircleAvatar: true,
)

πŸ”Š Note: Previously named ImageWithTitle, now moved to reusable_list_item package.


πŸ“„ License

MIT Β© 2025 reusable_image_widget authors


πŸš€ Contributing

Pull requests and issues are welcome!


πŸ‘¨β€πŸ’Ό Author

reusable_image_widget Developed with ❀️ by Shohidul Islam Contributions, issues, and pull requests are welcome!