before_after

パッケージ概要

公開情報に基づく選定ガイドです。参考としてご利用ください。

2つの画像間の違いを可視化するためのドラッグ可能なスライダーインターフェースを提供することで、差分の可視化を簡素化するFlutterパッケージです。ユーザーが前後状態を横並びで比較できるため、画像編集や変換プレビュー、または視覚的な比較が必要なあらゆるシナリオに最適です。Android、iOS、Web、macOS、Windows、Linuxなど複数のプラットフォームをサポートしており、広範な互換性を確保しています。軽量で、既存のFlutterプロジェクトへの統合も簡単です。

用途

画像編集の比較
前後写真レビュー
ビジュアル変換のプレビュー
ユーザーテストインターフェース
デザインイテレーションフィードバック

主な機能

ドラッグ可能な分割スライダー
クロスプラットフォーム対応
シンプルな統合
スムーズな遷移
カスタマイズ可能なハンドル
レスポンシブレイアウト

適している対象

画像比較ツールを開発する開発者
デザイナーが編集を紹介しています
視覚フィードバックを必要とするアプリ
サイドバイサイドのビジュアルを備えた教育アプリ
インタラクティブUIのプロトタイピング

注意事項

2つの画像アセットが必要です
大きな画像ではパフォーマンスが異なる場合があります
基本的なスタイリングを超えるカスタマイズは限られている
動画やアニメーションコンテンツに最適化されていません
動的画像の更新には追加の処理が必要になる可能性があります

元の README

関連するソースリポジトリの README 原文のスナップショットです。最新の内容はリポジトリをご覧ください。

👏 Before After

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

Show some :heart: and star the repo to support the project

🔅 Gifs

💻 Installation

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

dependencies:
  before_after: <latest version>

❔ Usage

Import this class

import 'package:before_after/before_after.dart';

before after

BeforeAfter(
  value: value,
  before: Image.asset('assets/after.png'),
  after: Image.asset('assets/before.png'),
  onValueChanged: (value) {
    setState(() => this.value = value);
  },
)

🎨 Customization and Attributes

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.

📃 License

MIT License

カテゴリー・パッケージ・リポジトリを検索

パッケージをインストール