flutter pub add before_after根據套件公開資料產生的選型評估，僅供參考。
一個 Flutter 套件，透過提供可拖曳的滑桿介面來簡化兩個影像之間差異的視覺化。它允許使用者並排比較前後狀態，非常適合影像編輯、變換預覽或任何需要視覺對比的情境。此套件支援 Android、iOS、Web、macOS、Windows 與 Linux 等多個平台，確保廣泛相容性。輕量且易於整合至現有的 Flutter 專案中。
以下為關聯原始碼儲存庫的 README 原文快照，最新內容請造訪原始碼儲存庫。
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
 |
 |
 |
In the dependencies: section of your pubspec.yaml, add the following line:
dependencies:
before_after: <latest version>
import 'package:before_after/before_after.dart';
BeforeAfter(
value: value,
before: Image.asset('assets/after.png'),
after: Image.asset('assets/before.png'),
onValueChanged: (value) {
setState(() => this.value = value);
},
)
| 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. |