n_image_picker

Description:

n image picker

Neil's Image Picker #











With this widget, you can: #

Select images
Load images on startup
Name the JSON key of the image
Obtain the multipart file
Have error control when loading the image
Change the widgets displayed when loading the initial image, when selecting an image, when undoing the selection of an image, and when an error occurs.
Full preview

Controller properties #
/// Image in bytes list
imageController.bytes -> Uint8List

/// When onLoadingImage has a url
imageController.error -> bool

/// Show blur background or black transparency
imageController.viewerBlur -> bool

/// List of supported formats
imageController.fileTypes -> List<String>

imageController.hasImage -> bool
imageController.hasNoImage -> bool
imageController.image -> Image
imageController.file -> File
imageController.path -> Path

/// return an async [MultipartFile] for uploading using [key], example:
/// - {"key" : "image_path.png"}
await imageController.image(key: "key") -> Furute<MultipartFile>

/// Map for headers, this need a backend open port for your domain
imageController.headers -> Map<String, String>
copied to clipboard
Controller metodhs #
/// Set the image file from http response and url
imageController.setFromResponse(response: Response, url: String)

/// This don't work in web!
imageController.setFromPath(path: String)

/// Get image from url, this works in all enviroment
imageController.setFromURL(context, url: String, headers: Map<String, String>)

/// Open the image dialog picker
imageController.pickImage(maxSize: int)

imageController.removeImage(notify: bool)
imageController.showImageViewer(notify: bool)
copied to clipboard
Widget properties #
ImagePicker(
controller : ImageController : required,
width : double? null,
height : double? null,
onTap : Future<void> Function() ? null,
onLoadingImage : String? null,
filterOpacity : double? null,
emptyWidget : Widget? null,
filledWidget : Widget? null,
onErrorWidget : Widget? null,
onLoadingWidget : Widget? null,
margin : EdgeInsetsGeometry? null,
bankgroundColor : Color? null,
border : Border? null,
shadow : BoxShadow? null,
readOnly : bool? null,
fit : BoxFit? null,
viewerBlur : bool? null,
viewerBlurSigma : double? null,
previewBlur : bool? null,
previewBlurSigma : double? null,
shape : BoxShape? null,
borderRadius : BorderRadius? null,
headers : Map<String, String>? null,
dimension : Double?? null

/// Only available for bmp, cur, jpg, png, pvr, tga, tiff formats
maxSize : int??null //resize image
)
copied to clipboard
HOW TO USE #
1. Create a controller and add a listener #
ImageController imageController = ImageController();

@override
void initState() {
super.initState();
imageController.addListener(() => setState(() {}));
}

@override
void dispose() {
super.dispose();
imageController.removeListener((){});
imageController.dispose();
}
copied to clipboard
2. Use multiple options to view and select images #
ImagePicker(
controller : imageController
width : 250,
height : 250,
)

ImagePicker.circle(
controller : imageController,
dimension : 200
)

ImagePicker.square(
controller : imageController,
dimension : 200
)

ImagePicker.expand(
controller : imageController,
)

//! If the image server has CORS security on the web and your code doesn't include
//! the headers accepted by the server, it will return an error. It's important to
//! note that CORS security includes a registry of accepted IPs in the backend,
//! if your project is not on the list, even if it has the correct headers, the
//! image will not be displayed.

ImageViewer(
image : 'https://w.wallhaven.cc/full/49/wallhaven-49d5y8.jpg'
width : 250,
height : 250,
)

ImageViewer.square(
image : 'https://w.wallhaven.cc/full/49/wallhaven-49d5y8.jpg',
dimension : 200
)

ImageViewer.circle(
image : 'https://w.wallhaven.cc/full/49/wallhaven-49d5y8.jpg',
dimension : 200
)
ImageViewer.expand(
image : 'https://w.wallhaven.cc/full/49/wallhaven-49d5y8.jpg',
)
copied to clipboard
Acknowledgements #
A special thanks to Moinkhan780 for his contributions to version 2.3.2: #
- Fix setFromURL method.
- Fixed typo mistakes in the code.
- Optimized and updated the example code for better clarity and functionality.
copied to clipboard