Package detailsv3.2.0

before_after

A flutter package which makes it easier to display the difference between two images.

AndroidiOSWebmacOSWindowsLinux

pub.dev API documentation Source code

30-day downloads: 3.8K
Likes: 210
Pub points: 150

Install package

flutter pub add before_after

Package Overview

Package selection guidance compiled from public package information, community data, and project usage.

A Flutter package that simplifies the visualization of differences between two images by providing a draggable slider interface. It allows users to compare before and after states side by side, making it ideal for image editing, transformation previews, or any scenario requiring visual comparison. The package supports multiple platforms including Android, iOS, Web, macOS, Windows, and Linux, ensuring broad compatibility. It is lightweight and easy to integrate into existing Flutter projects.

Use cases

Image editing comparisons
Before/after photo reviews
Visual transformation previews
User testing interfaces
Design iteration feedback

Key features

Draggable split slider
Cross-platform support
Simple integration
Smooth transitions
Customizable handles
Responsive layout

Suitable for

Developers building image comparison tools
Designers showcasing edits
Apps requiring visual feedback
Educational apps with side-by-side visuals
Prototyping interactive UIs

Considerations

Requires two image assets
Performance may vary with large images
Limited customization beyond basic styling
Not optimized for video or animated content
May need additional handling for dynamic image updates

Original README

Original README snapshot from the linked source repository. Visit the repository for the latest content.

👏 Before After

A flutter package which makes it easier to display the differences between two images..

The source code is 100% Dart, and everything resides in the /lib folder.

Live Demo: https://xsahil03x.github.io/before_after

Show some :heart: and star the repo to support the project

🔅 Gifs

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

dependencies:
  before_after: <latest version>

❔ Usage

Import this class

import 'package:before_after/before_after.dart';

before after

BeforeAfter(
  value: value,
  before: Image.asset('assets/after.png'),
  after: Image.asset('assets/before.png'),
  onValueChanged: (value) {
    setState(() => this.value = value);
  },
)

🎨 Customization and Attributes

Field	Type	Description
before	Widget	The widget to be displayed before the slider.
after	Widget	The widget to be displayed after the slider.
direction	SliderDirection	The drag direction of the slider.
height	double?	The height of the BeforeAfter widget.
width	double?	The width of the BeforeAfter widget.
trackWidth	double?	The width of the slider track.
trackColor	Color?	The color of the slider track.
hideThumb	bool	Whether to hide the slider thumb.
thumbHeight	double?	The height of the slider thumb.
thumbWidth	double?	The width of the slider thumb.
thumbColor	Color?	The color of the slider thumb.
overlayColor	MaterialStateProperty<Color?>?	The highlight color that's typically used to indicate that the slider thumb is focused.
thumbDecoration	BoxDecoration?	The decoration of the slider thumb.
divisions	int?	The number of discrete divisions on the slider.
value	double	The position of the slider, ranging from 0.0 to 1.0.
onValueChanged	ValueChanged?	A callback function that is called when the value of the slider changes.
thumbDivisions	int?	The number of discrete divisions on the slider thumb.
thumbPosition	double	The position of the slider thumb, ranging from 0.0 to 1.0.
onThumbPositionChanged	ValueChanged?	A callback function that is called when the position of the thumb changes.
focusNode	FocusNode?	The focus node for the widget.
autofocus	bool	Whether the widget should be focused automatically.
mouseCursor	MouseCursor?	The cursor for a mouse pointer when it enters or hovers over the widget.