n_image_picker 2.0.1

Configurable and easy-to-use cross-platform image selector.

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>

Controller metodhs

/// Set the image file from http response and url
imageController.setFromResponse(response: Response, url: String)

/// This dont 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()

imageController.removeImage(notify: bool)
imageController.showImageViewer(notify: bool)

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
)

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();
}

2. Use multiple options for seeing and picking images

ImagePicker(
    controller: imageController
)

ImagePicker.circle(
    controller: imageController
)

ImagePicker.square(
    controller: imageController
)

ImageViewer(
    onLoadingImage: 'https://w.wallhaven.cc/full/49/wallhaven-49d5y8.jpg'
)

ImageViewer.square(
    onLoadingImage: 'https://w.wallhaven.cc/full/49/wallhaven-49d5y8.jpg'
)

ImageViewer.circle(
    onLoadingImage: 'https://w.wallhaven.cc/full/49/wallhaven-49d5y8.jpg'
)