A polished profile-photo cropper with a circular mask inside a dimmed modal. Drag to reposition, pinch/scroll to zoom, and tap Crop to export a perfect avatar. Clean, tactile controls and a friendly “X” close make it ideal for onboarding and profile settings.

Functionality

• Circular crop mask with draggable image and resize handles.

• Pan & zoom (drag, pinch, or mouse wheel) for precise framing.

• Live preview feel with soft overlay outside the crop area.

• Crop/Cancel actions with clear primary Crop button.

• Auto EXIF orientation fix so uploads aren’t rotated.

• Optional tools: rotate 90°, reset, flip (configurable).

• Output formats: PNG/JPEG/WebP with quality and size limits.

• Transparent background for circle exports (PNG/WebP).

• Min/max resolution checks with helpful error messages.

• Keyboard hints: Esc to close, Enter to crop (optional).

• Accessible modal: focus trap, screen-reader labels, large hit targets.

• Light/Dark themes with subtle shadows and rounded UI.

• Data binding: save to Firebase Storage/Supabase, store URL in Firestore.

• Works with pickers: camera, gallery, drag-and-drop.

• Internationalization ready (labels, formats).

Great for: user accounts, community apps, marketplaces, education, and any screen that needs a fast, beautiful avatar crop.

Keywords: FlutterFlow avatar cropper, profile photo, circular crop, circle mask, image crop, crop modal, pan and zoom, pinch to zoom, drag handles, rotate image, flip image, reset crop, overlay dim, live preview, PNG export, JPEG export, WebP export, transparent background, compression quality, output size, EXIF orientation fix, image picker, camera upload, gallery upload, drag and drop, Firebase Storage, Supabase Storage, Firestore URL, accessible dialog, keyboard shortcuts, light theme, dark theme, responsive UI, mobile first, Flutter widget, FlutterFlow component, user onboarding, profile settings, avatar editor, high DPI, smooth animation, modern UX.