패키지, 저장소 및 앱 카테고리 검색

flip_carousel 표지
패키지 상세v0.0.3

flip_carousel

3D 플립 애니메이션을 가진 무한 캐러셀. 위젯과 이미지 둘 다 위젯의 입력으로 할당할 수 있습니다. 원근감과 카드 간격을 수정할 수 있습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
39
좋아요
47
Pub 점수
160

패키지 설치

flutter pub add flip_carousel

패키지 개요

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

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


List<dynamic> cardItems = [
    'https://i.ibb.co/QYdQHBw/batman2.jpg',
    'https://i.ibb.co/vwhykYp/spider1.jpg',
    'https://i.ibb.co/H4VrQS4/spider2.jpg',
    Container(color: Colors.amber, child: const FlutterLogo()),
  ];



FlipCarousel(
        items: cardItems,
          transitionDuration: const Duration(milliseconds: 400),
          isAssetImage: false,
          border: Border.all(width: 5, color: const Color(0xFFFFFFFF)),
          width: 250,
          height: 400,
          fit: BoxFit.cover,
          perspectiveFactor: 0.002,
          layersGap: 30,
          
          onChange: (int pageIndex) {
            print(pageIndex);
          },
          onTap: () {
            print("tap");
          },
        ),

Customization

  • You can add both widgets and ImageUrls as input.
  • 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.
  final List<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.
  final bool assetImage;

  /// Set as the image slider [width].
  /// Defaults to 300.
  final double width;

  /// Set as the image slider [height].
  /// Defaults to 450.
  final double height;

  /// Returns the page index after animation is done .
  final Function(int pageIndex)? onChange;

  /// Runs the given code onPress .
  final Function()? onTap;

  /// Set as the main frames [backgroundColor].
  final Color? backgroundColor;

  /// Determines the value of the [fit] property of the images
  /// Defaults to BoxFit.cover.
  final BoxFit fit;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.
  final double layersGap;

  /// Determines the perspective transformation of the [H3DCard] when being animated.
  /// Defaults to 0.0015.
  final double perspectiveFactor;

  /// Determines the space between two [H3DCard].
  /// Defaults to 30.

  final BoxBorder? border;

  /// Determines the [borderRadius] of the [H3DCard].
  /// Defaults to 30.

  final BorderRadius borderRadius;

  /// Determines the clip behaviour of the child widget.
  /// Defaults to [Clip.hardEdge].

  final Clip childClip;

  /// Determines [Duration] of transition animation.
  /// Defaults to 500 milliseconds.
  final Duration transitionDuration;

  /// Determines [Visibility] of the transition arrows.
  /// Defaults to True.

  final bool arrowControllersVisibility;

  /// Determines [Color] of the transition arrows.
  /// Defaults to [Colors.white].
  final Color arrowControllersColor;

  /// Determines [tag] of the selected  [H3DCard].
  final String heroTag;

```#

카테고리

소스 저장소

이 패키지를 사용하는 프로젝트

아직 데이터가 없습니다.