Let the grid static as a square, moving just the image

[valksandro]

new behavior, let the grid as a perfect square and move just the image. Some apps have this behavior, like whatsApp for instance.

[lubritto]

Need too!

[stefanschaller]

I also want behavior like WhatsApp, The current behavior feels weird.

Thank you 🥇 By the way -> Nice package with a good performance

[VickySalunkhe]

@valksandro @lubritto

Use the crop function as below and thus you can fix the cropping behaviour square / rectangle

Crop.file( _sampleImage,
   key: cropKey,
   aspectRatio: widget.cropType == "square" ? 1.0 : 4.0/3.0,
),

[TimonBozzApps]

Does this really fix the issue? Because you can still move and scale the mask, but now it's just a square. I would prefer that you can only move the image in the background and not the scaling mask.

[mshenawy22]

Hey Fellas

I figured a way to do it, use a stack and put inside it a container with a thick border that basically overrides the grid , this way the image will only move and there's no way to move the grid or change its size because its overriden by a container Here's the code

```

Stack(

  children: <Widget>[


  Container(
    constraints: BoxConstraints.expand(
      height:300 ,
      width: 300,
    ),
    child :
    Crop.file(_sample, key: cropKey,
      scale : 2.0,
      aspectRatio:2,
      maximumScale : 2.0,
      alwaysShowGrid : false,
    ),
 ),
    Container(
      margin: EdgeInsets.symmetric(vertical: 70.0),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.blueAccent, width: 12),
        //
      ),
      constraints: BoxConstraints.expand(
        height:170 ,
        width: 300,
      ),


    ),

)

[burakcbdn]

@mshenawy22 this solution is not working because, container at the top of stack makes Crop widget untouchable even though it is transparent. Working solution is using stack again but not with container add just two lines at the top of image and the bottom. Here is the code;

Container(
      child: Stack(
        children: [
          AspectRatio(
            aspectRatio: 4 / 3,
            child: Crop.file(
              File(photos[0].path),
              key: singleCropKey,
              alwaysShowGrid: true,
              maximumScale: 4 / 3,
              aspectRatio: 4 / 3,
            ),
          ),
          Align(
            alignment: Alignment.topCenter,
            child: Container(
              width: double.infinity,
              height: 10,
              color: Colors.white,
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              width: double.infinity,
              height: 10,
              color: Colors.white,
            ),
          ),
        ],
      ),
    )