Cropping images is a pretty common thing in apps these days, but it’s still hard to do in our Flutter apps. We usually end up with packages that ‘bridge’ native libraries, which is fine but not ideal. What if we can crop images through a Flutter widget instead?
Don’t want to do the work or read about it, but just need an image cropper? Then feel free to just add my CropperX package to your project and crop away!
We pass by designs with image croppers quite a lot here at Pinch, but always end up compromising one way or another. Cropping seems to be hard to both work right and look good at the same time, which is a shame when using a UI toolkit like Flutter. That’s why I decided to check whether it was easy to at least manipulate images in the Flutter framework and export them somehow…
Converting a widget to an image
So during my search, I came across a fairly unknown widget: RepaintBoundary. This widget is great for improving performance, and I highly recommend you to check it out. For the cropper, however, the key takeaway for using RepaintBoundary is that we can get its child as an image! That’s right, if you wrap your widget in a RepaintBoundary you’re able to ‘take a snapshot’ of your widget 😄
