GitLocker: The Coding Marketplace

Description:

image compare slider

Image Compare Slider #

Inspired by react-compare-slider, this package allows you to easily compare two images with a slider.
PR's are welcome!

Installation 💻 #
❗ In order to start using Image Compare you must have the Dart SDK installed on your machine.
Add image_compare_slider to your pubspec.yaml:
dependencies:
image_compare_slider:
copied to clipboard
Install it:
dart pub get
copied to clipboard
Import it:
import 'package:image_compare_slider/image_compare_slider.dart';
copied to clipboard
Use it:
//...
ImageCompareSlider(
itemOne: const Image.asset('...'),
itemTwo: const Image.network('...'),
)
//...
copied to clipboard
The widget its pretty simple and customizable, see:

Customization 🎨 #
You can customize the widget with the following parameters:

Parameter
Type
Description

itemOne
Image
The first image to compare

itemTwo
Image
The second image to compare

changePositionOnHover
bool
If the slider should change position when the mouse is over it

handleSize
Size
The size of the handle

handleRadius
BorderRadius
The radius of the handle

fillHandle
bool
If the handle should be filled

hideHandle
bool
If the handle should be hidden

handlePosition
double
The position of the handle relative to the slider

handleFollowsPosition
bool
If the handle should follow the position of the slider

onPositionChange
void Function(double position)?
The callback to be called when the position changes

direction
SliderDirection
The direction of the slider will clip the image

dividerColor
Color
The color of the divider

handleColor
Color
The color of the handle

handleOutlineColor
Color
The color of the handle outline

dividerWidth
double
The width of the divider

itemOneBuilder
Widget Function(Widget child, BuildContext context)?
The wrapper for the first image

itemTwoBuilder
Widget Function(Widget child, BuildContext context)?
The wrapper for the second image

photoRadius
BorderRadiusGeometry
Radius of the photo.

If you want to add some effects you can use the itemOneBuilder and itemTwoBuilder parameters to wrap the images with a ColorFilter or ImageFilter, or any other widget you want.
For example, to add a ImageFilter with a blur effect:
// ...
ImageCompareSlider(
itemOne: const Image.asset('...'),
itemTwo: const Image.asset('...'),
itemOneBuilder: (child, context) => ImageFiltered(
imageFilter: ImageFilter.blur(sigmaX: 2, sigmaY: 5),
child: child,
),
)
// ...
copied to clipboard
Will result in:

You can also pass any custom properties to the Image for itemOne and itemTwo, and most of the Image properties will be applied to the ImageCompareSlider widget.
For example, adding a colorBlendMode with a color to itemOne:
// ...
ImageCompareSlider(
itemOne: const Image.asset('...', color: Colors.red, colorBlendMode: BlendMode.overlay),
itemTwo: const Image.asset('...'),
)
// ...
copied to clipboard
Will result in:

Customizing the handle and divider is also possible:
// ...
ImageCompareSlider(
itemOne: const Image.asset('...'),
itemTwo: const Image.asset('...'),
handleSize: Size(0.05, 0.05),
handleRadius: const BorderRadius.all(Radius.circular(50)),
fillHandle: true,
dividerColor: Colors.black,
dividerWidth: 10,
handlePosition: 0.8,
// ...
)
// ...
copied to clipboard
Will result in:

If you are having problems because height/width is not the same for both images, consider using Intrinsics in the builder:
// ...
ImageCompareSlider(
itemOne: const Image.asset('...'),
itemTwo: const Image.asset('...'),
itemOneBuilder: (child, context) => IntrinsicHeight(child: child),
itemTwoBuilder: (child, context) => IntrinsicHeight(child: child),
// or
itemOneBuilder: (child, context) => IntrinsicWidth(child: child),
itemTwoBuilder: (child, context) => IntrinsicWidth(child: child),
)
copied to clipboard