搜尋套件、儲存庫與 APP 分類

before_after_image_slider_nullsafty 封面
套件詳情v1.0.1

before_after_image_slider_nullsafty

一個 Flutter 套件,可更容易地以滑塊形式並排顯示兩張圖片之間的差異。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
99
喜歡數
34
Pub 分數
160

安裝套件

flutter pub add before_after_image_slider_nullsafty

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

一個 Flutter 套件,透過可拖曳的滑塊簡化顯示兩張圖片之間視覺差異的過程。它支援並列比較與順暢過渡效果,非常適合用於照片編輯、醫學影像或裝修預覽等應用中的前後對比情境。此套件確保空值安全,並支援 Android、iOS、Web、macOS、Windows 與 Linux 等多個平台。它提供直覺的介面,讓使用者能互動式地探索圖像變更。

適用情境

  • 照片編輯對比
  • 醫學影像分析
  • 家居裝修預覽
  • 前後對比產品評論
  • 使用者體驗測試

主要特色

  • 可拖曳的滑塊用於圖像對比
  • 空安全的 Dart 實現
  • 跨平台支援
  • 平滑過渡效果
  • 簡單 API 結合
  • 響應式設計

適合對象

  • 開發圖像比較工具的開發者
  • 需要視覺變更追蹤的應用程式
  • 教育或診斷應用
  • 互動媒體展示

使用建議

  • 需要兩張高品質的圖像以獲得最佳效果
  • 效能可能會因大型影像檔案而異
  • 滑塊外觀的自定義選項有限
  • 最適合靜態圖像對
  • 不適用於影片或動畫內容

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

👏 Before After Open Source Love License Build Status Awesome Flutter

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.

🔅 Gifs

Screenshot Screenshot Screenshot

💻 Installation

In the dependencies: section of your pubspec.yaml, add the following line:

Version

dependencies:
  before_after_image_slider_nullsafty: <latest version>

❔ Usage

Import this class
import 'package:before_after_image_slider_nullsafty/before_after_image_slider_nullsafty.dart';
before after
   BeforeAfter(
     beforeImage: Image.asset('assets/after.jpg'),
     afterImage: Image.asset('assets/before.jpg'),
   ),

🎨 Customization and Attributes

All customizable attributes for BeforeAfter Widget

Attribute Name Example Value Description
beforeImage (Widget) Image.asset('assets/before.jpg') Sets the Before Image
afterImage (Widget) Image.asset('assets/after.jpg') Sets the After Image
isVertical (bool) false Sets the orientation of the slider
imageHeight (double) 100.0 Sets height of both the images
imageWidth (double) 200.0 Sets width of the images
imageCornerRadius (double) 16.0 Sets the corner radius of the images
thumbColor (Color) Colors.red Sets the color of the slider
thumbRadius (double) 16.0 Sets the radius of the thumb circle
overlayColor (Color) Colors.yellow Sets the color of the slider thumb overlay

👍 How to Contribute

  1. Fork it
  2. Create your feature branch (git checkout -b my-new-feature)
  3. Commit your changes (git commit -am 'Add some feature')
  4. Push to the branch (git push origin my-new-feature)
  5. Create new Pull Request

📃 License

Copyright (c) 2022 Asad Khan

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Getting Started

For help getting started with Flutter, view our online documentation.

For help on editing package code, view the documentation.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。