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