image_masking_flutter 0.0.2

The Image Masking Flutter Plugin allows developers to create an interactive image reveal effect.

image_masking_flutter

The Image Masking Flutter Plugin allows developers to create an interactive image reveal effect. It allows users to interactively reveal or color an image by dragging their fingers across the screen.

Installation

To use this package, add image_masking_flutter as a dependency in your pubspec.yaml file:

dependencies:

  image_masking_flutter: ^1.0.0

copied to clipboard

Usage

import 'package:image_masking_flutter/image_masking_widget.dart';

copied to clipboard

GIF

Example

Create a GlobalKey

  final GlobalKey<ImageMaskingWidgetState> _imageMaskingKey = GlobalKey<ImageMaskingWidgetState>();

copied to clipboard

Use Image Masking Widget

  ImageMaskingWidget(
      key: _imageMaskingKey,
      height: MediaQuery.of(context).size.height/2,
      width: MediaQuery.of(context).size.width,
      margin: EdgeInsets.symmetric(vertical: MediaQuery.of(context).size.height/4,horizontal: 15),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.black, width: 2)),
      coloredImage: "assets/images/kid_color.jpeg", //Use colored image here
      unColoredImage: "assets/images/kid_uncolor.jpeg", //Use outlined image without color with same size & resolution according to above colored image
    )

copied to clipboard

Reset the view

   _imageMaskingKey.currentState?.resetView();

copied to clipboard

Author

Follow GitHub @Sohit-Sharma

Follow LinkedIn: @Sohit-Sharma

Contributing

If you find a bug or want to contribute to this project, feel free to open an issue or submit a pull request. Contributions are welcome!

Happy Coding!