BeforeAfter class

An interactive widget that allows comparing two images using a before and after view.

The BeforeAfter widget displays two images, before and after, with a draggable slider in between. The slider can be used to reveal or hide portions of the images, providing a comparison effect.

The direction determines the direction of the slider and can be either SliderDirection.horizontal or SliderDirection.vertical. The value specifies the initial position of the slider, ranging from 0.0 (fully hidden) to 1.0 (fully visible). The onValueChanged callback is called when the value of the slider changes, providing the updated value.

The appearance of the slider can be customized using various properties:

  • thumbColor: The color of the slider thumb.
  • thumbRadius: The radius of the slider thumb.
  • overlayColor: The color of the overlay when the images are revealed.
  • thumbImage: The image to be displayed on the slider thumb.

The position of the slider thumb can be controlled using thumbPosition. The onThumbPositionChanged callback is called when the position of the thumb changes, providing the updated position.

Note: The before and after widgets should have the same size.

Inheritance

Constructors

BeforeAfter({Key? key, required Widget before, required Widget after, double? height, double? width, double? trackWidth, Color? trackColor, bool hideThumb = false, double? thumbHeight, double? thumbWidth, Color? thumbColor, WidgetStateProperty<Color?>? overlayColor, BoxDecoration? thumbDecoration, SliderDirection direction = SliderDirection.horizontal, double value = 0.5, int? divisions, ValueChanged<double>? onValueChanged, double thumbPosition = 0.5, int? thumbDivisions, ValueChanged<double>? onThumbPositionChanged, MouseCursor? mouseCursor, FocusNode? focusNode, bool autofocus = false})
Creates a BeforeAfter widget with the specified before and after images.

Properties

after → Widget
The widget to be displayed after the slider.
final
autofocus → bool
True if this widget will be selected as the initial focus when no other node in its scope is currently focused.
final
before → Widget
The widget to be displayed before the slider.
final
direction → SliderDirection
The drag direction of the slider.
final
divisions → int?
The number of discrete divisions on the slider.
final
focusNode → FocusNode?
An optional focus node to use as the focus node for this widget.
final
hashCode → int
The hash code for this object.
no setterinherited
height → double?
The height of the BeforeAfter widget.
final
hideThumb → bool
Whether to hide the slider thumb.
final
key → Key?
Controls how one widget replaces another widget in the tree.
finalinherited
mouseCursor → MouseCursor?
The cursor for a mouse pointer when it enters or is hovering over the widget.
final
onThumbPositionChanged → ValueChanged<double>?
A callback function that is called when the position of the thumb changes.
final
onValueChanged → ValueChanged<double>?
A callback function that is called when the value of the slider changes.
final
overlayColor → WidgetStateProperty<Color?>?
The highlight color that's typically used to indicate that the slider thumb is focused.
final
runtimeType → Type
A representation of the runtime type of the object.
no setterinherited
thumbColor → Color?
The color of the slider thumb.
final
thumbDecoration → BoxDecoration?
The decoration of the slider thumb.
final
thumbDivisions → int?
The number of discrete divisions on the slider thumb.
final
thumbHeight → double?
The height of the slider thumb.
final
thumbPosition → double
The position of the slider thumb, ranging from 0.0 to 1.0.
final
thumbWidth → double?
The width of the slider thumb.
final
trackColor → Color?
The color of the slider track.
final
trackWidth → double?
The width of the slider track.
final
value → double
The position of the slider, ranging from 0.0 to 1.0.
final
width → double?
The width of the BeforeAfter widget.
final

Methods

createElement() → StatefulElement
Creates a StatefulElement to manage this widget's location in the tree.
inherited
createState() → State<BeforeAfter>
Creates the mutable state for this widget at a given location in the tree.
override
debugDescribeChildren() → List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children.
inherited
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node.
override
noSuchMethod(Invocation invocation) → dynamic
Invoked when a nonexistent method or property is accessed.
inherited
toDiagnosticsNode({String? name, DiagnosticsTreeStyle? style}) → DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep.
inherited
toString({DiagnosticLevel minLevel = DiagnosticLevel.info}) → String
A string representation of this object.
inherited
toStringDeep({String prefixLineOne = '', String? prefixOtherLines, DiagnosticLevel minLevel = DiagnosticLevel.debug, int wrapWidth = 65}) → String
Returns a string representation of this node and its descendants.
inherited
toStringShallow({String joiner = ', ', DiagnosticLevel minLevel = DiagnosticLevel.debug}) → String
Returns a one-line detailed description of the object.
inherited
toStringShort() → String
A short, textual description of this widget.
inherited

Operators

operator ==(Object other) → bool
The equality operator.
inherited