image_picker_widget #

A new Flutter package to integrate image_picker with a simple Flutter widget, allowing you to edit an image without any problems with design code development

Getting Started #

Add the dependency in pubspec.yaml:

dependencies:
  ...
  # Design
  image_picker_widget: '>=2.0.0 <3.0.0 
  # For pre null-safety, use version 1.0.3'

A Flutter plugin for iOS and Android for picking images from the image library, and taking new pictures with the camera.

Installation #

Since this package requires image_picker, and image_cropper you need to add this requirements bellow.

iOS #

Add the following keys to your Info.plist file, located in <project root>/ios/Runner/Info.plist:

• NSPhotoLibraryUsageDescription - describe why your app needs permission for the photo library. This is called Privacy - Photo Library Usage Description in the visual editor.
• NSCameraUsageDescription - describe why your app needs access to the camera. This is called Privacy - Camera Usage Description in the visual editor.
• NSMicrophoneUsageDescription - describe why your app needs access to the microphone, if you intend to record videos. This is called Privacy - Microphone Usage Description in the visual editor.

Android #

Image Picker config:

No configuration required - the plugin should work out of the box.

It is no longer required to add android:requestLegacyExternalStorage="true" as an attribute to the

Image Cropper config:

• Add UCropActivity into your AndroidManifest.xml

<activity
    android:name="com.yalantis.ucrop.UCropActivity"
    android:screenOrientation="portrait"
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>

Note:

From v1.2.0, you need to migrate your android project to v2 embedding (detail)

Parameter (Required) #

• diameter - The diameter of the container in which the image is contained.

Parameter (Optional) #

• initialImage - The initial image to be displaied, can be an ImageProvider, File or a external url (String)
• isEditable - Checks whether the image can be changed
• shouldCrop - defines if the image can be edited and/or croped with the defined values bellow default to false.
• onChange - Case the image can be changed, this function will be called after the change.

Customization (Optional) #

Image Picker Widget #

• shape - The shape of the widget [square or circle]
• backgroundColor - The background of the widget [default to Colors.grey[500]]
• editIcon - The widget that references the possibility of editing

Modal image type picker #

• modalTitle - The title of the widget [default to Text > "Select:"]
• modalCameraIcon - The camera icon that selects the camera [default to Icons.camera]
• modalCameraText - The camera label that indicates to selects the camera [defaults to Text > "camera"]
• modalGalleryIcon - The gallery icon that selects the gallery [default to Icons.collections]
• modalGalleryText - The gallery label that indicates to selects the gallery [defaults to Text > "gallery"]

Image Cropping #

• maxWidth - maximum cropped image width.
• maxHeight - maximum cropped image height.
• aspectRatio - controls the aspect ratio of crop bounds. If this values is set, the cropper is locked and user can't change the aspect ratio of crop bounds.
• aspectRatioPresets - controls the list of aspect ratios in the crop menu view. In Android, you can set the initialized aspect ratio when starting the cropper by setting the value of AndroidUiSettings.initAspectRatio.
• cropStyle - controls the style of crop bounds, it can be rectangle or circle style (default is CropStyle.rectangle).
• compressFormat - the format of result image, png or jpg (default is ImageCompressFormat.jpg).
• compressQuality - the value [0 - 100] to control the quality of image compression.
• androidUiSettings - controls UI customization on Android. See Android customization.
• iosUiSettings - controls UI customization on iOS. See iOS customization.

Basic Usage #

Adding the widget

..child: ImagePickerWidget(
    diameter: 180,
    // initialImage: "https://strattonapps.com/wp-content/uploads/2020/02/flutter-logo-5086DD11C5-seeklogo.com_.png",
    shape: ImagePickerWidgetShape.circle, // ImagePickerWidgetShape.square
    isEditable: true,
    onChange: (File file) {
        print("I changed the file to: ${file.path}");
    },
)

Issues #

Please if you see any issues, bugs, or feature requests, send to me in: GitHub issue.