editableimage flutter package

flutter package for creating a fully customizable and editable image widget. the package has been written solely in dart language.

features

a powerful and fully customizable widget. it provides a custom widget to save time.

for example, almost in every profile settings interface, etc., there is a profile image. instead of writing from scratch, this widget can be used and can save a lot of time.

getting started

let’s take a look at how to implement editableimage to fastly create user interfaces for profile picture edit, etc.

firstly, add following line to pubspec.yaml:

editable_image: ^0.1.0

second, import editableimage:

import 'package:editable_image/editable_image.dart';

lastly, make platform-specific setups by applying the following instructions.

ios setup

• platform version must be at least 9.0. please modify ios/podfile and update accordingly:

platform :ios, '9.0'

• add the following lines to ios/runner/info.plist:

<key>nsphotolibraryusagedescription</key>
<string>put here your permission description.</string>

android setup

required permissions: internet, read_external_storage.

if you found some warning logs with glide appearing, then the main project needs an implementation of appglidemodule. see generated api.

macos setup

• platform version must be at least 10.15. please modify macos/podfile and update accordingly:

platform :osx, '10.15'

• please set the minimum deployment target to 10.15. use xcode to open macos/runner.xcworkspace:
• follow the ios instructions and modify ios/runner/info.plist accordingly.

usage

basic usage example:

main.dart

// a simple usage of editableimage.
// this method gets called when trying to change an image.
void _directupdateimage(file? file) async {
    if (file == null) return;

    _profilepicfile = file;
    setstate(() {});
}

editableimage(
// define the method that will run on the change process of the image.
onchange: (file) => _directupdateimage(file),

// define the source of the image.
image: _profilepicfile.existssync()
    ? image.file(_profilepicfile, fit: boxfit.cover)
    : null,

// define the size of editableimage.
size: 150.0,

// define the theme of image picker.
imagepickertheme: themedata(
    // define the default brightness and colors.
    primarycolor: colors.white,
    shadowcolor: colors.transparent,
    backgroundcolor: colors.white70,
    icontheme: const iconthemedata(color: colors.black87),

    // define the default font family.
    fontfamily: 'georgia',
),

// define the border of the image if needed.
imageborder: border.all(color: colors.black87, width: 2.0),

// define the border of the icon if needed.
editiconborder: border.all(color: colors.black87, width: 2.0),
),

example

more examples can be found in /example folder on .

user profile 1 – an example of basic implementation of editableimage. simple project that simulates user profile edit screen.

user profile 2 – an example of implementation of editableimage. simple project that simulates user profile edit screen.

additional information

this package has been written solely in dart language yet it has the wechat_assets_picker as a dependency. therefore, editableimage currently supports only android, ios, and macos platforms. in the future, other platform supports may be added.

for more information please visit .

feature requests and bugs

please file feature requests and bugs at the issue tracker.

maintainers

• bulent baris kilic