Here is your full README.md file for your Flutter Image Upload Widget, including setup, permissions, usage, customization, and platform-specific instructions:
π README.md
# πΈ Flutter Image Upload Widget
A reusable, beautiful, and customizable Flutter widget to upload images using the device **camera** or **gallery**, with support for **edit, delete**, and **upload** actions.
> β
No third-party dependencies except `image_picker`.
---
## β¨ Features
- π· Pick images from **camera** or **gallery**
- πΌοΈ Display image preview (supports multiple)
- ποΈ **Delete** or βοΈ **Edit** (replace) images
- π Upload action with callback
- π¨ Fully customizable UI (labels, colors, size)
- π« No external compression/storage dependencies
---
## π¦ Installation
### 1. Add dependencies
In your `pubspec.yaml`:
```yaml
dependencies:
flutter:
sdk: flutter
image_upload: ^latest_version
Then run:
flutter pub get
2. Android Setup
β AndroidManifest.xml
Path: android/app/src/main/AndroidManifest.xml
Add permissions outside <application>:
<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.READ_MEDIA_IMAGES"/>
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="28"/>
Add this inside <application>:
<provider
android:name="androidx.core.content.FileProvider"
android:authorities="${applicationId}.fileprovider"
android:exported="false"
android:grantUriPermissions="true">
<meta-data
android:name="android.support.FILE_PROVIDER_PATHS"
android:resource="@xml/provider_paths"/>
</provider>
β Create file: android/app/src/main/res/xml/provider_paths.xml
<?xml version="1.0" encoding="utf-8"?>
<paths xmlns:android="http://schemas.android.com/apk/res/android">
<external-path name="external_files" path="." />
</paths>
3. iOS Setup
β ios/Runner/Info.plist
Add the following entries inside <dict>:
<key>NSCameraUsageDescription</key>
<string>This app needs access to the camera to take photos.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app needs access to the photo library to select images.</string>
<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to the microphone for video recording.</string>
π Usage
Import the widget:
import 'image_upload_widget.dart';
Use in your UI:
ImageUploadWidget(
allowMultiple: true,
onImagesSelected: (List<File> images) {
// Called after image(s) selected
debugPrint("Selected images: ${images.map((e) => e.path)}");
},
onUploadTap: (List<String> paths) {
// Called when upload button is pressed
debugPrint("Ready to upload: $paths");
},
);
ποΈ Customization
| Parameter | Type | Default | Description |
|---|---|---|---|
allowMultiple |
bool |
false |
Allow picking multiple images |
title |
String |
"Upload Image" |
Title displayed on top |
cameraText |
String |
"Camera" |
Camera button label |
galleryText |
String |
"Gallery" |
Gallery button label |
uploadButtonText |
String |
"Upload" |
Upload button label |
onImagesSelected |
Function(List<File>) |
required | Triggered after image(s) selected |
onUploadTap |
Function(List<String>) |
required | Triggered when upload is tapped |
π Directory Structure
lib/
β£ widgets/
β β image_upload_widget.dart
β main.dart
πΈ Screenshots
| Empty State | With Images |
|---|---|
![]() |
![]() |
π‘ Permissions
Use permission_handler (optional) if you want to ask permissions manually on runtime:
// Optional: Check and request permissions
await Permission.camera.request();
await Permission.photos.request();
π License
This widget is licensed under the MIT License β free for personal & commercial use.
π¬ Contributions
Found a bug or want to add a feature? Feel free to contact with me.
Happy Coding π
---
## π¨βπ» Author
**Md. Rahul Reza**
* Website: [rahulreza.com](https://www.rahulreza.com)
* Contact: contact@rahulreza.com

