selectable_area 1.0.3

A powerful and flexible Flutter widget that allows users to select and capture a rectangular area over any child widget.

Selectable Area

A powerful and flexible Flutter widget that allows users to select a rectangular area over any child widget and capture it as an image. Perfect for document scanning, image cropping, user-driven data extraction, and any feature where you need to snip a portion of your UI.

Demo

Features

• Wrap any Widget: Use it on an Image, ListView, Column, or any other widget.
• Flexible Output: Get the captured selection as a base64 String or a raw Uint8List of PNG bytes.
• Optimized Performance: Uses isolates for heavy processing (like Base64 encoding) to prevent UI lag and skipped frames.
• Customizable: Control the appearance of the selection box with your own CustomPainter.

Getting Started

This section will guide you through how to start using the selectable_area package in your Flutter project.

Installation

1. Add this to your package's pubspec.yaml file:

   dependencies:
     selectable_area: ^1.0.3
   

2. Run the following command in your terminal to install the package:

   flutter pub get
   

Import

Now, in your Dart code, you can use:

import 'package:selectable_area/selectable_area.dart';

Usage

Wrap any widget with SelectableArea. The widget and its children will become selectable. Note that in complex scrollable layouts, you may need to manage gesture conflicts to ensure the best user experience.

Here is a simple example of how to capture a selection from an Image widget.

import 'package:selectable_area/selectable_area.dart';
import 'dart:typed_data';

// ...

SelectableArea(
  // The widget you want to capture from
  child: Image.network('https://.../your_image.png'),
  
  // Choose your output format
  outputType: SelectionOutputType.bytes,
  
  // This callback is triggered when the user finishes selecting
  onSelectionEnd: (dynamic selectionResult) {
    // The result will be a Uint8List because we chose .bytes
    if (selectionResult is Uint8List) {
      // Now you can use the image bytes, for example,
      // send them to an API or display them in a dialog.
      showDialog(
        context: context,
        builder: (context) => Dialog(
          child: Image.memory(selectionResult),
        ),
      );
    }
  },
);