如何在Flutter中实现与原生Android基于Android-Image-Cropper的拍照裁剪旋转相同功能？

Absolutely! You can totally replicate the exact photo capture + crop/rotate workflow you had with Android-Image-Cropper in Flutter—no need to reinvent the wheel here. The image_cropper Flutter plugin actually wraps the native Android-Image-Cropper library under the hood, so you'll get the same familiar functionality and UI on Android. Here's a step-by-step guide to implement it:

1. Add Dependencies #

First, add the required plugins to your pubspec.yaml file. We'll use image_picker to handle camera capture, and image_cropper for the editing features:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.0.4 # Handles camera/gallery image selection
  image_cropper: ^5.0.0 # Wraps native Android-Image-Cropper

Run flutter pub get to install them.

2. Android Configuration #

Since you're familiar with native Android, these steps will feel familiar:

• Open android/app/src/main/AndroidManifest.xml and add necessary permissions:

  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.READ_MEDIA_IMAGES" />
  <!-- For Android versions < 13 -->
  <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" android:maxSdkVersion="32" />
  

• Ensure your android/build.gradle has a minimum SDK version of 21 (required by image_cropper):

  defaultConfig {
      minSdkVersion 21
      // ... other configs
  }
  

3. Full Implementation Code #

Here's a complete example that mimics your native workflow:

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'package:image_cropper/image_cropper.dart';
import 'dart:io';

class PhotoCaptureEditor extends StatefulWidget {
  const PhotoCaptureEditor({super.key});

  @override
  State<PhotoCaptureEditor> createState() => _PhotoCaptureEditorState();
}

class _PhotoCaptureEditorState extends State<PhotoCaptureEditor> {
  File? _editedImage;
  final ImagePicker _imagePicker = ImagePicker();

  // Capture photo and launch cropper
  Future<void> _captureAndEditPhoto() async {
    // Step 1: Take a photo with the camera
    final XFile? rawPhoto = await _imagePicker.pickImage(source: ImageSource.camera);
    if (rawPhoto == null) return;

    // Step 2: Launch the cropper (uses native Android-Image-Cropper under the hood)
    final CroppedFile? croppedFile = await ImageCropper().cropImage(
      sourcePath: rawPhoto.path,
      // Preset aspect ratios matching native Android-Image-Cropper
      aspectRatioPresets: [
        CropAspectRatioPreset.square,
        CropAspectRatioPreset.ratio3x2,
        CropAspectRatioPreset.original,
        CropAspectRatioPreset.ratio4x3,
        CropAspectRatioPreset.ratio16x9
      ],
      uiSettings: [
        AndroidUiSettings(
          toolbarTitle: 'Edit Photo',
          toolbarColor: Colors.deepOrange,
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false, // Allow users to adjust aspect ratio freely
          enableRotation: true, // Enable the rotate button (just like native)
          showCropGrid: true, // Show grid lines for alignment
        ),
      ],
      // Optional: Set output image quality and format
      compressQuality: 80,
      compressFormat: ImageCompressFormat.jpg,
    );

    if (croppedFile != null) {
      setState(() {
        _editedImage = File(croppedFile.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Camera + Editor')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // Display the edited image if available
            if (_editedImage != null)
              ClipRRect(
                borderRadius: BorderRadius.circular(12),
                child: Image.file(_editedImage!, height: 300, width: 300, fit: BoxFit.cover),
              ),
            const SizedBox(height: 32),
            ElevatedButton(
              onPressed: _captureAndEditPhoto,
              child: const Text('Take Photo & Edit'),
            ),
          ],
        ),
      ),
    );
  }
}

Key Notes About the Implementation #

• The image_cropper plugin uses the exact same native Android-Image-Cropper library you're used to, so the UI and behavior will be identical to your native app.
• You can customize almost every aspect of the cropper: toolbar colors, aspect ratio locks, rotation controls, grid visibility, and image compression settings.
• To add gallery image editing instead of camera capture, just change ImageSource.camera to ImageSource.gallery in the pickImage call.

内容的提问来源于stack exchange，提问作者Septian Dwi Indradi