EditableImage Flutter 包

Flutter 包，用于创建完全可自定义且可编辑的图像小部件。该包仅使用 Dart 语言编写。

功能

一个强大且完全可自定义的小部件。它提供了一个自定义小部件，可以节省您的时间。

例如，几乎在每个个人资料设置界面中，都会有一个个人资料图片。与其从头开始编写，不如使用这个小部件，可以节省大量时间。

 

1 2 3
4 5

 

入门

让我们看看如何实现EditableImage，以快速创建用于编辑个人资料图片等的 UI。

首先，在pubspec.yaml中添加以下行

editable_image: ^0.1.0

其次，导入EditableImage

import 'package:editable_image/editable_image.dart';

最后，通过应用以下说明进行特定于平台的设置。

iOS 设置

  • 平台版本必须至少为 9.0。请修改ios/Podfile并相应更新

platform :ios, '9.0'
  • 将以下行添加到ios/Runner/Info.plist

<key>NSPhotoLibraryUsageDescription</key>
<string>Put here your permission description.</string>

Android 设置

所需权限：INTERNET、READ_EXTERNAL_STORAGE。

如果您发现 Glide 出现一些警告日志，那么主项目需要实现AppGlideModule。请参阅 Generated API。

macOS 设置

  • 平台版本必须至少为 10.15。请修改macos/Podfile并相应更新

platform :osx, '10.15'

  • 请将最低部署目标设置为 10.15。使用 XCode 打开macos/Runner.xcworkspace

  • 遵循 iOS 说明并相应修改ios/Runner/Info.plist。

 

用法

基本用法示例

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),
),

 

示例

更多示例可以在 GitHub 上的/example文件夹中找到。

用户资料 1 –EditableImage基本实现的示例。一个模拟用户资料编辑屏幕的简单项目。

用户资料 2 –EditableImage实现的示例。一个模拟用户资料编辑屏幕的简单项目。

 

附加信息

该包仅用 Dart 语言编写，但它具有 wechat_assets_picker 作为依赖项。因此，EditableImage目前仅支持Android、iOS和macOS平台。将来可能会添加对其他平台的支持。

有关更多信息，请访问 GitHub。

 

功能请求和错误

请在 issue tracker 上提交功能请求和错误。

 

维护者

GitHub

查看 Github