Flip Carousel는 위젯이나 이미지를 표시하기 위한 무한하고 3D 플립 애니메이션을 제공하는 Flutter 패키지입니다. 카드 간의 시점과 간격을 사용자 정의할 수 있어 다양한 플랫폼에서 몰입감 있고 상호작용 가능한 콘텐츠 전시가 가능합니다. 부드러운 플립 전환을 통해 동적 콘텐츠를 보여주는 앱에 쉽게 통합할 수 있습니다. 갤러리, 제품 전시 또는 카드 기반 탐색이 필요한 모든 UI에 적합합니다.
사용 사례
인터랙티브 이미지 갤러리
제품 전시 인터페이스
동적 콘텐츠 슬라이더
모바일 앱 온보딩 화면
디지털 플립북 경험
주요 기능
3D 플립 애니메이션을 사용한 무한 스크롤링
사용자 정의 가능한 시점 및 카드 간격
위젯과 이미지 모두 항목으로 지원
크로스 플랫폼 호환성
부드럽고 반응성이 뛰어난 터치 상호작용
적합한 대상
인터랙티브 UI를 구축하는 개발자
시각적으로 풍부한 캐러셀을 찾는 디자이너
매력적인 콘텐츠 제시가 필요한 앱
Android, iOS, 웹, macOS, Windows 및 Linux를 대상으로 하는 프로젝트
고려 사항
대규모 데이터 세트와 함께 성능에 영향을 줄 수 있음
최적의 시각 효과를 위해 조망각을 신중하게 조정해야 합니다
기본 스타일링을 넘어서는 사용자 정의가 제한적
중간 수준의 카드 수에 가장 적합하여 유연성을 유지
원본 README
연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.
A simple infinite horizontal carousel with flip animation which can be used for both image and widgets
📱 Usage
Import package in your file
import'package:flip_carousel/flip_carousel.dart';
Use FlipCarousel widget
FlipCarousel(items:cardItems);
Give a list of data and set the properties as you wish
make sure that you have set the the [ isAssetImage ] value base on your source.
Here is the rest of properties that can be modyfied
/// List of image/widgets to be shown in the carousel; Accepts two types of link./// For example: `https://...jpg` for online images and `assets/...` for local images.finalList<dynamic> items;
/// Specifies the type of image addresses in [imagesLink]./// Must be `false` if [imagesLink] contains online images./// Must be `true` if [imagesLink] contains local images.finalbool assetImage;
/// Set as the image slider [width]./// Defaults to 300.finaldouble width;
/// Set as the image slider [height]./// Defaults to 450.finaldouble height;
/// Returns the page index after animation is done .finalFunction(int pageIndex)? onChange;
/// Runs the given code onPress .finalFunction()? onTap;
/// Set as the main frames [backgroundColor].finalColor? backgroundColor;
/// Determines the value of the [fit] property of the images/// Defaults to BoxFit.cover.finalBoxFit fit;
/// Determines the space between two [H3DCard]./// Defaults to 30.finaldouble layersGap;
/// Determines the perspective transformation of the [H3DCard] when being animated./// Defaults to 0.0015.finaldouble perspectiveFactor;
/// Determines the space between two [H3DCard]./// Defaults to 30.finalBoxBorder? border;
/// Determines the [borderRadius] of the [H3DCard]./// Defaults to 30.finalBorderRadius borderRadius;
/// Determines the clip behaviour of the child widget./// Defaults to [Clip.hardEdge].finalClip childClip;
/// Determines [Duration] of transition animation./// Defaults to 500 milliseconds.finalDuration transitionDuration;
/// Determines [Visibility] of the transition arrows./// Defaults to True.finalbool arrowControllersVisibility;
/// Determines [Color] of the transition arrows./// Defaults to [Colors.white].finalColor arrowControllersColor;
/// Determines [tag] of the selected [H3DCard].finalString heroTag;
```#