reusable_image_widget 0.0.6

A reusable Flutter widget library for picking, cropping, compressing, and displaying images from gallery, camera, or network with full-screen preview support.

reusable_image_widget

Reusable Flutter widgets and utilities for picking, cropping, compressing, and displaying images with easy configuration and integrated state management.

---

✅ Features

• Pick images from gallery or camera with a customizable picker

• Crop images with custom aspect ratio presets

• Compress images to reduce file size with quality control

• Display images from:

  • Network URL
  • Assets
  • Local files via XFile

• Fullscreen image viewer with:

  • Zoom, pan, double-tap zoom, swipe-to-dismiss
  • Download image feature

• Avatar widgets (circular/rectangular) with editable overlay icons

• Custom placeholders and error handling

• Built-in state management using ImagePickerCubit

• Integration-ready for dependency injection (GetIt)

---

🚀 Installation

Add to your pubspec.yaml:

reusable_image_widget: <latest_version>

Then run:

flutter pub get

---

📦 Usage

✨ Pick and Crop Image

final XFile? pickedImage = await pickerService.pickImage(
  source: ImageSource.gallery,
  maxHeight: 500,
  maxWidth: 500,
  imageQuality: 85,
);

final XFile? croppedImage = await cropperService.cropImage(
  pickedFile: pickedImage!,
  context: context,
);

---

✨ Compress Image

final XFile compressedImage = await compressorService.compressImage(
  pickedImage,
  quality: 85,
);

---

🎯 Use AvatarImagePicker (Recommended)

AvatarImagePicker(
  imageSource: 'assets/images/default_avatar.png',
  imageQuality: 85,
  maxHeight: 500,
  maxWidth: 500,
  crop: true,
  compress: true,
  onChanged: (file) {
    // Handle updated image file
  },
);

---

🖼️ Display Avatar Image

AvatarImageViewer(
  xFile: pickedFile,
  imageSource: 'https://example.com/profile.jpg',
  radius: 40,
  showEditIcon: true,
  onTapEdit: () {
    // Open picker or handle edit action
  },
);

---

👤 Use AppCircleAvatar

AppCircleAvatar(
  imageSource: 'https://example.com/profile.jpg',
  radius: 40,
);

---

🔍 Fullscreen Image Viewer

Navigator.of(context).push(
  MaterialPageRoute(
    builder: (_) => FullScreenImageViewer(
      pickedFile: pickedFile,
      imageSource: imageUrl,
      heroTag: 'profile-avatar',
    ),
  ),
);

---

🧠 Using AppImagePicker with Bloc

Ensure ImagePickerCubit is provided via BlocProvider and dependencies are registered via GetIt.

AppImagePicker(
  crop: true,
  compress: true,
  onChanged: (file) {
    // Handle selected image
  },
);

---

🛠️ Dependency Injection & Bloc Setup

Register services and cubit using GetIt:

void main() {
  registerReusableImageWidgetDependencies();
  initReusableImageWidgetBlocProvider();

  runApp(
    MultiBlocProvider(
      providers: reusableImageWidgetBlocProviders,
      child: const MyApp(),
    ),
  );
}

Wrap your app with the cubit provider:

MultiBlocProvider(
  providers: [
    BlocProvider<ImagePickerCubit>(create: (_) => sl<ImagePickerCubit>()),
    // other providers...
  ],
  child: MyApp(),
);

---

📦 Dependencies

• flutter
• image_picker
• image_cropper
• flutter_image_compress
• cached_network_image
• photo_view
• flutter_bloc
• get_it

---

📁 Example

See the example/ directory for a full implementation.

---

📄 License

Licensed under the MIT License.

---

👨‍💼 Author

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

---