Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/BBarisKilic/Editable-Image
Flutter package for creating a fully customizable and editable image widget. The package has been written solely in Dart Language.
https://github.com/BBarisKilic/Editable-Image
android dart editable-image editable-image-widget flutter ios macos package picker widget
Last synced: 27 days ago
JSON representation
Flutter package for creating a fully customizable and editable image widget. The package has been written solely in Dart Language.
- Host: GitHub
- URL: https://github.com/BBarisKilic/Editable-Image
- Owner: BBarisKilic
- License: apache-2.0
- Created: 2021-10-25T18:57:31.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2023-02-12T15:53:57.000Z (over 1 year ago)
- Last Synced: 2024-04-15T00:41:16.031Z (3 months ago)
- Topics: android, dart, editable-image, editable-image-widget, flutter, ios, macos, package, picker, widget
- Language: Dart
- Homepage: https://pub.dev/packages/editable_image
- Size: 12.4 MB
- Stars: 7
- Watchers: 2
- Forks: 3
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-stars-webVueBlog - BBarisKilic/Editable-Image - Flutter package for creating a fully customizable and editable image widget. The package has been written solely in Dart Language. (Dart / 运维\&DevOps)
README
# Editable Image | Flutter Package
[Flutter](https://flutter.dev/) package for creating a fully customizable and editable image widget. The package has been written solely in [Dart Language](https://dart.dev/).
|  | 
| -------------------------------------------------------- | -------------------------------------------------------- |
## 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.
First, add following line to `pubspec.yaml`:
```yaml
editable_image: ^2.0.0
```
Second, import `EditableImage`:
```dart
import 'package:editable_image/editable_image.dart';
```
Lastly, make platform-specific setups by applying the following instructions.
### Android Setup
- The minimum required SDK version is `21`. Therefore, please find the following line inside `android/app/build.gradle` and modify it:
```gradle
compileSdkVersion 33
..
..
..
minSdkVersion 21
targetSdkVersion 33
```
- Please upgrade the Kotlin version (ext.kotlin_version) to `1.7.0` or the latest version. To do that, find the following line inside `android/build.gradle` and modify it:
```gradle
ext.kotlin_version = '1.7.0'
```
- Please upgrade the Gradle version (ext.kotlin_version) to `6.8.3` or the latest version but lower than `7.0.0`. To do that, find the following line inside `android/gradle/wrapper/gradle-wrapper.properties` and modify it:
```properties
distributionUrl=https\://services.gradle.org/distributions/gradle-6.8.3-all.zip
```
- Please go to your project folder and add `android:exported="true"` to AndroidManifest.xml file
```
```
- Required permissions: `READ_EXTERNAL_STORAGE`. Please modify `android/app/src/main/AndroidManifest.xml` and update accordingly:
```xml
```
- I recommand you add `android:requestLegacyExternalStorage="true"` to AndroidManifest.xml. Therefore, please modify `android/app/src/main/AndroidManifest.xml` and add the following line inside `application`:
```xml
```
If you found some warning logs with Glide appearing, then the main project needs an implementation of `AppGlideModule`. See [Generated API](https://sjudd.github.io/glide/doc/generatedapi.html).
### iOS Setup
- Platform version must be at least 9.0. Please modify `ios/Podfile` and update accordingly:
```ruby
platform :ios, '11.0'
```
- Add the following lines to `ios/Runner/Info.plist`:
```plist
NSAppTransportSecurity
NSAllowsArbitraryLoads
NSPhotoLibraryUsageDescription
Put here your permission description.
```
### macOS Setup
- Platform version must be at least 10.15. Please modify `macos/Podfile` and update accordingly:
```ruby
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`
```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;
setState(() {
_profilePicFile = file;
});
}
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 != null
? 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 [GitHub](https://github.com/BBarisKilic/Editable-Image).
[User Profile 1](https://github.com/BBarisKilic/Editable-Image/tree/master/example/user_profile_1) - an example of basic implementation of `EditableImage`. Simple project that simulates user profile edit screen.
[User Profile 2](https://github.com/BBarisKilic/Editable-Image/tree/master/example/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](https://github.com/fluttercandies/flutter_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 [GitHub](https://github.com/BBarisKilic/Editable-Image).
## Feature requests and bugs
Please file feature requests and bugs at the [issue tracker](https://github.com/BBarisKilic/Editable-Image/issues).
## Maintainers
- [Bulent Baris Kilic](https://github.com/BBarisKilic)