Question 244640 in Flutter Question posted in
The official Flutter documentation can be found here.

how to crop and rotate image in flutter?

class EditImage extends StatefulWidget {
  final List<String> imagePath;

  const EditImage({Key? key, required this.imagePath}) : super(key: key);

  @override
  _EditImageState createState() => _EditImageState();
}

class _EditImageState extends State<EditImage> {
  int currIndex = 0;
  final ImageCropper _imageCropper = ImageCropper();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        title: const Text('Crop and Rotate Image'),
      ),
      body: SingleChildScrollView(
        child: Center(
          child:
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              if (widget.imagePath.isNotEmpty) ...[
                Image.file(File(widget.imagePath[currIndex])),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: _editImage,
                  child: const Text('Edit Image'),
                ),
              ] else ...[
                Container(
                  child: const Text('No images to edit.'),
                ),
              ],
            ],
          ),
          ),
      ),
    );
  }


  Future<void> _editImage() async {
    if (widget.imagePath.isEmpty) {
      // Handle the case where there are no images to edit.
      return;
    }

    String imageFilePath = widget.imagePath[currIndex];

    try {
      // Start cropping process
      final croppedFile = await _imageCropper.cropImage(
        sourcePath: imageFilePath,
        aspectRatioPresets: [
          CropAspectRatioPreset.square,
          CropAspectRatioPreset.ratio3x2,
          CropAspectRatioPreset.original,
          CropAspectRatioPreset.ratio4x3,
          CropAspectRatioPreset.ratio16x9,
        ],
        compressQuality: 100, // Adjust compression quality as needed
          uiSettings: [
          AndroidUiSettings(
              toolbarTitle: 'Cropper',
              toolbarColor: Colors.deepOrange,
              toolbarWidgetColor: Colors.white,
              initAspectRatio: CropAspectRatioPreset.original,
              lockAspectRatio: false),
          // IOSUiSettings(
          //   title: 'Cropper',
          // ),
          // WebUiSettings(
          //   context: context,
          // ),
        ],
      );


      // Update the image path if cropping is successful
      if (croppedFile != null) {
        setState(() {
          widget.imagePath[currIndex] = croppedFile.path;
        });
      }
    } catch (e) {
      print("Error during cropping: $e");
    }
  }
}

i selected image from previous page and want to crop and rotate ..like the selected images show and the preview_image(in the square box below the image show from which we know how many images we select)and perform crop and rotate .but this code isn’t work you can also remove edit button from this page and perform all operations on this page .

Tags:

2

Answers


  1. 0

    use can use image_cropper Here’s link

    Login or Signup to reply.
  2. 0

    use image_cropper: ^5.0.0
    form pub.dev

    Example Code for cropping and rotation

    Future<void> _rotateImage() async {
  // Specify the path to the image you want to rotate
  String imagePath = 'path_to_your_image.jpg'; // Replace with your image path

  // Specify the angle by which you want to rotate the image (in degrees)
  int rotationAngle = 90; // Rotate 90 degrees clockwise, for example

  // Use the rotateImage method to rotate the image
  File rotatedImage = await ImageCropper.rotateImage(
    path: imagePath,
    angle: rotationAngle,
  );

  if (rotatedImage != null) {
    // The rotated image is now stored in the 'rotatedImage' variable.
    // You can use it as needed.
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search