在开发项目里修改用户头像的功能,涉及到图片选取及裁剪,基本实现步骤如下:
1、pubspec.yaml 添加 image_picker: ^1.0.1 image_cropper: ^4.0.1:
dependencies:
image_picker: ^1.0.1
image_cropper: ^4.0.1
flutter:
sdk: flutter
2、AndroidManifest.xml 添加:
XML
<activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
3、封装工具类 image_picker_helper.dart ,代码如下:
Dart
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';
/// @description: 从相册或照相机里选取图片的工具,带裁剪功能
class ImagePickerHelper {
BuildContext buildContext;
ImagePickerHelper(this.buildContext);
void pickImage(ImageSource source, ImagePickerCallback? callback) {
ImagePicker().pickImage(source: source).then((image) {
if (image == null) return;
if (callback == null) return;
callback.call(image);
}).onError((error, stackTrace) {
debugPrint("获取图片失败:$error");
});
}
void cropImage(File originalImage, ImageCropCallback? callback) {
Future<CroppedFile?> future = ImageCropper().cropImage(
sourcePath: originalImage.path,
maxWidth: 100,
maxHeight: 100,
uiSettings: [
AndroidUiSettings(
toolbarTitle: '',
toolbarColor: Colors.white,
statusBarColor: Colors.white,
toolbarWidgetColor: Colors.green,
initAspectRatio: CropAspectRatioPreset.square,
lockAspectRatio: false),
IOSUiSettings(
title: '',
),
WebUiSettings(
context: buildContext,
),
],
);
future.then((value) {
debugPrint("_cropImage path:${value == null ? "" : value.path}");
if (value == null) return;
if (callback == null) return;
callback.call(value);
}).onError((error, stackTrace) {
debugPrint("裁剪图片失败:$error");
});
}
void pickWithCropImage(ImageSource source, ImageCropCallback? callback) {
pickImage(source, (xFile) {
cropImage(File(xFile.path), callback);
});
}
}
typedef ImagePickerCallback = void Function(XFile xFile);
typedef ImageCropCallback = void Function(CroppedFile croppedFile);
4、使用示例:
Dart
//ImageSource.camera 照相机 或 ImageSource.gallery 相册
ImagePickerHelper(context).pickWithCropImage(ImageSource.gallery,
(croppedFile) {
//获取到剪切的文件路径,进行相关的操作
debugPrint("croppedFile:${croppedFile.path}");
});