before_after 3.2.0 
before_after: ^3.2.0 copied to clipboard
Published 11 months ago β’ 
xdsahil.dev
xdsahil.devA flutter package which makes it easier to display the difference between two images.
π 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>
β 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. |
π License #
Metadata
197
likes
150
points
2.51k
downloads
Publisher
Weekly Downloads
Metadata
A flutter package which makes it easier to display the difference between two images.
Repository (GitHub)
View/report issues
Topics
#slider #image-comparison #before-and-after #image-slider #image-compare
Documentation
License
MIT (license)
