Flutter 学习之旅之 flutter 在 Android 端举行简单的图片裁剪操作 - ToB企服应用市场:ToB评测及商务社交产业平台

dependencies:
image_cropper: ^9.0.0
path_provider: ^2.1.5

复制代码

flutter:
assets:
- images/imagename.png

复制代码

Image.asset(
'images/owl.png',
width: 200,
height: 200,
);

复制代码

flutter:
assets:
- images/

复制代码

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

复制代码

<manifest xmlns:android="http://schemas.android.com/apk/res/android">
<application
android:label="test_image_crop"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
<activity
android:name=".MainActivity"
android:exported="true"
android:launchMode="singleTop"
android:taskAffinity=""
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize">
<!-- Specifies an Android theme to apply to this Activity as soon as
the Android process has started. This theme is visible to the user
while the Flutter UI initializes. After that, this theme continues
to determine the Window background behind the Flutter UI. -->
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
<!-- Don't delete the meta-data below.
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
<meta-data
android:name="flutterEmbedding"
android:value="2" />
<activity
android:name="com.yalantis.ucrop.UCropActivity"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar"/>
</application>
<!-- Required to query activities that can process text, see:
https://developer.android.com/training/package-visibility and
https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
<queries>
<intent>
<action android:name="android.intent.action.PROCESS_TEXT"/>
<data android:mimeType="text/plain"/>
</intent>
</queries>
</manifest>

复制代码

import 'dart:io'; // 导入 Dart 的文件操作库，用于文件读写
import 'package:flutter/material.dart'; // 导入 Flutter 的 Material 组件库
import 'package:image_cropper/image_cropper.dart'; // 导入 image_cropper 插件，用于裁剪图片
import 'package:path_provider/path_provider.dart'; // 导入 path_provider 插件，用于获取临时目录路径
import 'package:flutter/services.dart'; // 导入 Flutter 的服务库，用于加载资源文件
void main() {
runApp(MyApp()); // 启动应用
}
// 定义一个无状态的 MyApp 组件
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Image Cropper Demo', // 应用标题
theme: ThemeData(
primarySwatch: Colors.blue, // 设置主题颜色为蓝色
),
home: ImageCropperDemo(), // 设置首页为 ImageCropperDemo 页面
);
}
}
// 定义一个有状态的 ImageCropperDemo 组件
class ImageCropperDemo extends StatefulWidget {
@override
_ImageCropperDemoState createState() => _ImageCropperDemoState();
}
class _ImageCropperDemoState extends State<ImageCropperDemo> {
CroppedFile? _croppedFile; // 用于存储裁剪后的图片文件
final String _imageAssetPath = 'images/sunwukongd.jpg'; // 替换为你的图片路径
// 将资源文件复制到临时路径
Future<File> _copyAssetToTemp(String assetPath) async {
final tempDir = await getTemporaryDirectory(); // 获取设备的临时目录路径
final tempFilePath = '${tempDir.path}/temp_image.jpg'; // 定义临时文件路径
final ByteData data = await rootBundle.load(assetPath); // 从资源文件加载图片数据
final bytes = data.buffer.asUint8List(); // 将图片数据转换为字节列表
await File(tempFilePath).writeAsBytes(bytes); // 将字节数据写入临时文件
return File(tempFilePath); // 返回临时文件对象
}
// 裁剪图片的方法
Future<void> _cropImage() async {
try {
final tempFile = await _copyAssetToTemp(_imageAssetPath); // 将资源文件复制到临时路径
// 调用 ImageCropper 裁剪图片
final croppedFile = await ImageCropper().cropImage(
sourcePath: tempFile.path, // 指定裁剪的源图片路径
uiSettings: [
AndroidUiSettings( // 配置 Android 裁剪界面的样式
toolbarTitle: '裁剪图片', // 工具栏标题
toolbarColor: Colors.blue, // 工具栏背景颜色
toolbarWidgetColor: Colors.white, // 工具栏文字颜色
initAspectRatio: CropAspectRatioPreset.original, // 初始裁剪比例为原始图片比例
lockAspectRatio: false, // 不锁定裁剪比例，允许自由裁剪
),
IOSUiSettings( // 配置 iOS 裁剪界面的样式
title: '裁剪图片', // 裁剪界面标题
),
],
);
if (croppedFile != null) { // 如果裁剪成功
setState(() {
_croppedFile = croppedFile; // 更新裁剪后的图片文件
});
}
} catch (e) {
print('裁剪失败: $e'); // 如果裁剪失败，打印错误信息
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Image Cropper Demo'), // 设置应用栏标题
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center, // 垂直居中对齐
children: [
// 显示裁剪后的图片
if (_croppedFile != null) // 如果裁剪后的图片不为空
Image.file(
File(_croppedFile!.path), // 显示裁剪后的图片
width: 300, // 图片宽度
height: 300, // 图片高度
fit: BoxFit.contain, // 使用 BoxFit.contain 保持图片比例
)
else // 如果裁剪后的图片为空，显示原始图片
Image.asset(
_imageAssetPath, // 显示原始图片
width: 300, // 图片宽度
height: 300, // 图片高度
fit: BoxFit.contain, // 使用 BoxFit.contain 保持图片比例
),
SizedBox(height: 20), // 添加间距
ElevatedButton(
onPressed: _cropImage, // 点击按钮触发裁剪操作
child: Text('裁剪图片'), // 按钮文字
),
],
),
),
);
}
}

复制代码