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,
);

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!


Libraries

application/managers/image_picker_manager
config/bloc_provider/register_reusable_image_widget_bloc_provider
config/dependency_injection/register_reusable_image_widget_dependencies
constants/avatar_style_constants
constants/default_image_path
constants/image_style_constant
core/typedefs
extensions/image_source_type_checker
extensions/xfile_parser_extension
reusable_image_widget
services/app_image_compressor_service
services/app_image_cropper_service
services/app_image_picker_service
services/crop_aspect_ratio_preset_custom
services/i_services/i_image_compressor_service
services/i_services/i_image_cropper_service
utils/compress_image
utils/crop_image
utils/image_downloader/download_image_util
utils/image_provider/app_image_provider
utils/image_provider/app_image_resolver
utils/picked_image
view_models/image_picker_cubit/image_picker_cubit
views/widgets/build_avatar_image
views/widgets/cached_image
views/widgets/full_screen_viewer/full_screen_image_viewer
views/widgets/full_screen_viewer/full_screen_viewer_app_bar
views/widgets/full_screen_viewer/hero_wrapper
views/widgets/full_screen_viewer/photo_view_image
views/widgets/image_picker/app_image_picker
views/widgets/image_picker/app_image_picker_error_widget
views/widgets/image_picker/avatar_image_picker
views/widgets/image_picker/image_source_item_selector
views/widgets/image_picker/image_source_selector
views/widgets/image_viewer/app_avatar_image
views/widgets/image_viewer/app_circle_avatar
views/widgets/image_viewer/app_image_viewer
views/widgets/image_viewer/app_rectangle_avatar
views/widgets/image_viewer/image_builder
views/widgets/profile/avatar_image_viewer
views/widgets/profile/circle_avatar_with_online_indicator
views/widgets/profile/edit_avatar_icon
views/widgets/profile/image_with_title