before_after

패키지 개요

공개 정보를 바탕으로 생성한 선택 가이드입니다.

두 이미지 간의 차이를 시각화하는 것을 단순화하기 위해 드래그 가능한 슬라이더 인터페이스를 제공하는 플러터 패키지입니다. 사용자가 전후 상태를 옆으로 비교할 수 있게 해주며, 이미지 편집, 변환 미리보기 또는 어떤 시각적 비교가 필요한 상황에도 적합합니다. 안드로이드, iOS, 웹, 맥OS, 윈도우, 리눅스 등 여러 플랫폼을 지원하여 광범위한 호환성을 보장합니다. 가볍고 기존 플러터 프로젝트에 쉽게 통합할 수 있습니다.

사용 사례

이미지 편집 비교
전/후 사진 리뷰
시각적 변환 미리보기
사용자 테스트 인터페이스
디자인 반복 피드백

주요 기능

드래그 가능한 분할 슬라이더
크로스 플랫폼 지원
간단한 통합
부드러운 전환
사용자 정의 가능한 핸들
반응형 레이아웃

적합한 대상

이미지 비교 도구를 개발하는 개발자
디자이너가 편집을 전시하고 있습니다
시각적 피드백이 필요한 앱
측면에 병렬 시각을 갖춘 교육용 앱
인터랙티브 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

분류, 패키지 및 저장소 검색

패키지 설치