Flutter中如何使用image_cropper插件实现非沉浸式裁剪

在Flutter中使用image_cropper插件时，如何实现非沉浸式裁剪？当前按照官方文档配置后，裁剪界面会自动隐藏状态栏和导航栏，导致UI适配出现问题。希望保留系统默认状态栏和底部导航栏的显示，而不是全屏沉浸式裁剪。请问该如何修改参数或调整配置？

2 回复

在Flutter中使用image_cropper插件实现非沉浸式裁剪，需设置androidUiSettings和iosUiSettings中的statusBarColor和toolbarColor为不同颜色，避免与系统状态栏融合。示例代码中明确指定状态栏和工具栏颜色即可。

更多关于Flutter中如何使用image_cropper插件实现非沉浸式裁剪的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中使用image_cropper插件实现非沉浸式裁剪（即保留系统状态栏和导航栏），需要配置插件的UI选项。以下是具体步骤和示例代码：

1. 添加依赖

在 pubspec.yaml 中添加：

dependencies:
  image_cropper: ^3.0.2
  image_picker: ^1.0.4

2. 配置Android权限（AndroidManifest.xml）

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />

3. 实现非沉浸式裁剪

关键是通过 UiSettings 设置 statusBarColor 和 toolbarColor 为透明，并禁用沉浸式模式：

import 'package:image_cropper/image_cropper.dart';
import 'package:image_picker/image_picker.dart';

Future<void> cropImage() async {
  final picker = ImagePicker();
  final pickedFile = await picker.pickImage(source: ImageSource.gallery);
  
  if (pickedFile != null) {
    final croppedFile = await ImageCropper().cropImage(
      sourcePath: pickedFile.path,
      uiSettings: PlatformUiSettings(
        android: AndroidUiSettings(
          toolbarTitle: '图片裁剪',
          toolbarColor: Colors.transparent, // 工具栏透明
          statusBarColor: Colors.transparent, // 状态栏透明
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false,
          hideBottomControls: false, // 显示底部控制栏
          // 禁用沉浸式模式
          immersiveMode: false,
        ),
        ios: IOSUiSettings(
          title: '图片裁剪',
        ),
      ),
    );
    
    if (croppedFile != null) {
      // 处理裁剪后的图片
      print('裁剪后的路径: ${croppedFile.path}');
    }
  }
}

4. 调用方法

在按钮点击事件中调用 cropImage() 即可。

注意事项：

  • 确保已处理存储权限
  • statusBarColor 和 toolbarColor 设为透明可避免遮挡系统栏
  • immersiveMode: false 明确禁用沉浸式模式

这样即可在裁剪时保持系统状态栏和导航栏可见，实现非沉浸式裁剪效果。

回到顶部