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

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!