Simple Image Cropper

pub package

A Flutter plugin for cropping images.

Image

Crop your image by selecting the region.

Demo

Installation

To use this plugin, add simple_image_cropper as a dependency in the pubspec.yaml.

Required parameters

  • image: The image to be cropped.
  • width: The width of this widget
  • height: The height of this widget

Customization

PropertyDescriptionType
outerRectColorChange the color of the outer rectangle. The default color is white color.Color
outerRectColorChange the color of the outer rectangle. The default color is white color.Color
innerRectColorChange the color of the inner rectangle. The default color is red color.Color
outerRectStrokeWidthChange the outer rectangle stroke width. The default value is 1.0.double
innerRectStrokeWidthChange the inner rectangle stroke width. The default value is 3.0.double
tlConerBgColorChange the cancel button background color. The default color is white color.Color
tlCornerFontColorChange the cancel button font color. The default color is grey color.Color
brCornerBgColorChange the resize button background color. The default color is blue color.Color
brCornerFontColorChange the resize button font color. The default color is white colorColor

Example

import 'package:flutter/material.dart';
import 'package:simple_image_cropper/simple_image_cropper.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Cropper Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Demo(),
    );
  }
}

class Demo extends StatefulWidget {
  Demo({Key? key}) : super(key: key);

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

class _DemoState extends State<Demo> {
  late ImageProvider _image;
  final GlobalKey<SimpleImageCropperState> cropKey = GlobalKey();

  @override
  void initState() {
    _image = AssetImage('assets/images/demo.jpg');
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final Size size = MediaQuery.of(context).size;
    return Scaffold(
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.crop),
          onPressed: () async {
            Image? image = await cropKey.currentState?.cropImage();
            if (image != null) {
              setState(() => _image = image.image);
            }
          },
        ),
        body: Container(
            height: size.height,
            width: size.width,
            child: SimpleImageCropper(
              key: cropKey,
              height: size.height,
              width: size.width,
              image: _image,
            )));
  }
}

Libraries

corner
corner_grabber
image_cropper
image_editor
image_editor_mode
inner_rect_item