📷 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!

🔗 Links #

• PhotoView
• CachedNetworkImage
• image_gallery_saver_plus
• permission_handler

👨‍💼 Author #

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