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

flutter_flip_card 표지
패키지 상세v0.0.6

flutter_flip_card

카드 뒤집기 애니메이션을 제공하는 컴포넌트입니다. 제품의 세부 정보를 숨기거나 표시하는 데 사용할 수 있습니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
6.8천
좋아요
160
Pub 점수
150

패키지 설치

flutter pub add flutter_flip_card

패키지 개요

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

플러터 패키지로 카드 뒤집기 애니메이션을 가능하게 하여 사용자가 제품 세부 정보와 같은 숨겨진 콘텐츠를 부드러운 뒤집기 효과로 노출할 수 있도록 합니다. 정보가 계층적으로 표시되는 인터랙티브 UI에 적합하며, 안드로이드, iOS, 웹, macOS, Windows, 리눅스 등 여러 플랫폼을 지원합니다. 이 컴포넌트는 가볍고 통합하기 쉬워 전자상거래 앱, 포트폴리오 또는 매력적인 전환 효과가 필요한 모든 인터페이스에 적합합니다.

사용 사례

  • 제품 세부 정보 공개
  • 인터랙티브 학습 카드
  • 포트폴리오 항목 쇼케이스
  • 게임 카드 뒤집기
  • 사용자 프로필 전환기

주요 기능

  • 부드러운 플립 애니메이션
  • 사용자 정의 가능한 앞면과 뒷면
  • 크로스 플랫폼 지원
  • 기존 위젯과의 간편한 통합
  • 설정 가능한 전환 방향 및 속도

적합한 대상

  • 전자상거래 애플리케이션
  • 교육 앱
  • 인터랙티브 UI 프로토타입
  • 모바일 및 웹 대시보드
  • 게임화 인터페이스

고려 사항

  • 저사양 기기에서 성능에 영향을 줄 수 있습니다
  • 기본 플립 효과를 넘어서는 사용자 정의가 제한적입니다
  • 상태 관리에 신중한 처리가 필요합니다
  • 복잡한 다층 애니메이션에 적합하지 않음
  • 간단하고 단일 목적의 플립 상호작용에 가장 적합

원본 README

연결된 소스 저장소의 README 원문 스냅샷입니다. 최신 내용은 저장소에서 확인하세요.

flutter_flip_card

A widget that does transition between two children in a flipping manner.

FlipCard GestureFlipCard
FlipCard GestureFlipCard

How to Use

To use flutter_flip_card, first start by importing the package.

import 'package:flutter_flip_card/flutter_flip_card.dart';

Currently Available Methods

  • FlipCard A component that provides a flip card animation

  • GestureFlipCard A component that provides a gsture(Swipe) flip card animation

FlipCard

    FlipCard(
        rotateSide: RotateSide.bottom,
        onTapFlipping: false, //When enabled, the card will flip automatically when touched.
        axis: FlipAxis.horizontal,
        controller: con1,
        frontWidget: Center(
        child: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    'image/01.png',
                    fit: BoxFit.fitHeight)
                )
            ),
        backWidget: Container(
            height: 200,
            width: 140,
            child: Image.asset(
                    `'image/02.jpg',
                    fit: BoxFit.fitHeight)
            )
        )
        
    final controller = FlipCardController();
    // Flip the card programmatically
    controller.flipcard();

GestureFlipCard

    GestureFlipCard(
            animationDuration: const Duration(milliseconds: 300),
            axis: FlipAxis.horizontal,
            controller:cong // used to ccontrol the Gesture flip programmatically
            enableController : false // if [True] if you need flip the card using programmatically
            frontWidget: Center(
                child: Container(
                  width: 300,
                  height: 200,
                  child: Image.asset(
                    'image/011.jpg',
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            backWidget: Container(
                width: 300,
                height: 200,
                child: Image.asset(
                  'image/11.jpg',
                  fit: BoxFit.contain,
                ),
            ),
        ),
Project Created & Maintained By
Gunanithi

Passionate #Flutter, #Android Developer. #UI Designer.

linkedin medium

Notes

Please open an issue if you find any bugs.

Donate

You like the package ? Buy me a coffee :)

Buy Me A Coffee

카테고리

소스 저장소

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