compare_slider

author pub

A slider that allows users to compare two widgets.

English | 简体中文

☕ Support me

ko-fi wechat

Chat: Join WeChat group

📦 Installation

Add this to your package's pubspec.yaml file:

dependencies:
  compare_slider: latest_version

Then run:

flutter pub get

🚀 Usage

Import it:

import 'package:compare_slider/compare_slider.dart';

Use it:

double value = 0.5;

CompareSlider(
  value: value,
  before: _buildImageView(isBefore: true),
  after: _buildImageView(isBefore: false),
  thickness: 1,
  thumb: _buildThumb(),
  onValueChanged: (double value) {
    this.value = value;
    setState(() {});
  },
);

🎨 Customization

You can customize the widget with the following parameters:

Parameter Type Description
dragOnlyOnSlider bool Defines the drag behavior (defaults to full area dragging).
false: Enables dragging across the entire component area. true: Restricts dragging to the slider thumb only.
value double The current value of the slider.
before Widget The widget displayed on the 'before' side of the slider.
after Widget The widget displayed on the 'after' side of the slider.
thumb Widget The slider thumb widget.
thickness double The thickness of the slider.
onValueChanged ValueChanged<double> Callback invoked when the slider's value changes.
onSliderThumbTouchBegin VoidCallback? Callback invoked when the slider thumb is touched.
This callback is triggered only when dragging the slider thumb if dragOnlyOnSlider is true; otherwise, it's triggered when dragging anywhere on the component.
onSliderThumbTouchEnd VoidCallback? Callback invoked when the slider thumb touch ends.
This callback is triggered only when the slider thumb drag ends if dragOnlyOnSlider is true; otherwise, it's triggered when dragging anywhere on the component ends.
onSliderDragEnd Function(CompareSliderDragEndResult)? Callback invoked when the slider drag operation ends.
extraHitTestArea EdgeInsets Expands the hit-test area for the slider thumb (effective when dragOnlyOnSlider is true).
debugHitTestAreaColor Color? The color of the expanded hit-test area (effective when dragOnlyOnSlider is true, for debugging purposes).

🧑‍💻 About Me

Libraries

compare_slider