GitLocker: The Coding Marketplace

Description:

before after

👏 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 ❤️ 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>
copied to clipboard
❔ Usage #
Import this class #
import 'package:before_after/before_after.dart';
copied to clipboard
before after #
BeforeAfter(
value: value,
before: Image.asset('assets/after.png'),
after: Image.asset('assets/before.png'),
onValueChanged: (value) {
setState(() => this.value = value);
},
)
copied to clipboard
🎨 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.

📃 License #
MIT License