搜索插件、代码仓与 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.

所属分类

源码仓库

使用此插件的项目

暂无相关数据。