compare_slider 0.0.1

A slider that allows users to compare two widgets.

compare_slider

A slider that allows users to compare two widgets.

English | 简体中文

☕ Support me

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

• GitHub: https://github.com/LinXunFeng
• Email: [e-mail]
• Blogs:
  • 全栈行动: https://fullstackaction.com
  • 掘金: https://juejin.cn/user/1820446984512392