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

ducafecatFlutter 생태계 탐색
패키지 상세v1.1.0

ripple_backdrop_animate_route

경로의 배경을 가진 리플 애니메이션. 이는 위젯을 애니메이션화하기 위해 투명한 페이지와 리플 배경 애니메이션을 생성합니다. 원하는 위젯을 넣고 효과를 사용자 정의할 수 있습니다.

AndroidiOSWebmacOSWindowsLinux
pub.dev API 문서 소스 코드
30일 다운로드
40
좋아요
41
Pub 점수
140

패키지 설치

flutter pub add ripple_backdrop_animate_route

패키지 개요

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

RippleBackdropAnimateRoute는 라우트 간 이동 시 시각적으로 매력적인 리플 애니메이션과 배경 효과를 제공하는 Flutter 패키지입니다. 투명 오버레이에 동적 리플 애니메이션을 생성하여 개발자가 라우트 전환의 시각적 영향을 맞춤 설정할 수 있도록 합니다. 이 패키지는 라우트 내부의 어떤 위젯도 지원하며 스타일과 동작에서 유연성을 제공합니다. 현대적이고 상호작용적인 UI에 적합하며, 다양한 플랫폼에서 부드럽고 애니메이션된 네비게이션 효과를 통해 사용자 경험을 향상시킵니다.

사용 사례

  • 인터랙티브 앱 탐색
  • 사용자 정의 라우트 전환
  • 개선된 사용자 온보딩
  • 터치에 대한 시각적 피드백
  • 현대적인 사용자 인터페이스 디자인
  • 애니메이션 스플래시 화면

주요 기능

  • 배경이 있는 리플 애니메이션
  • 사용자 정의 가능한 위젯 배치
  • 투명한 라우트 오버레이
  • 크로스 플랫폼 지원
  • 기존 경로와의 간편한 통합
  • 사용자 정의 가능한 애니메이션 매개변수

적합한 대상

  • 애니메이션 라우트 전환을 찾는 개발자
  • 디자인 중심의 플러터 앱
  • 상호작용형 탐색을 갖춘 앱
  • UI/UX 개선 프로젝트
  • Flutter 초보자들이 애니메이션을 탐색하고 있습니다

고려 사항

  • 저사양 기기에서 성능에 영향을 미칠 수 있습니다
  • 최적의 사용자 경험을 위해 신중한 맞춤 설정이 필요합니다
  • 기본 사용법 외에 문서가 제한적
  • 간단하고 정적인 탐색 흐름에 적합하지 않음
  • 과도하게 사용될 경우 애니메이션은 사용자의 집중을 방해할 수 있습니다

원본 README

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

ripple_backdrop_animate_route

pub package GitHub stars GitHub forks GitHub license GitHub issues FlutterCandies

A ripple animation with backdrop of route.

Screenshot:

Getting Started

Example Usage
import 'package:ripple_backdrop_animate_route/ripple_backdrop_animate_route.dart';

///...

RippleBackdropAnimatePage.show(
  context: context,
  child: Column(
    mainAxisAlignment: MainAxisAlignment.end,
    children: <Widget>[
      Text('This is ripple backdrop animate page.'),
    ],
  ),
  childFade: true,
  duration: 300,
  blurRadius: 20,
  bottomButton: Icon(Icons.visibility),
  bottomHeight: 60,
  bottomButtonRotate: false,
);
Parameters
Name Description Default
child Child for page. -
childFade When enabled, [child] will fade in when animation is going and fade out when popping. false
duration Animation's duration, including [Navigator.push], [Navigator.pop]. 300
blurRadius Blur radius for [BackdropFilter]. 20.0
bottomButton [Widget] for bottom of the page. -
bottomHeight The height which [bottomButton] will occupy. kBottomNavigationBarHeight
bottomButtonRotate When enabled, [bottomButton] will rotate when to animation is going. true
bottomButtonRotateDegree The degree which [bottomButton] will rotate. 45.0

카테고리

애니메이션 및 전환

소스 저장소

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

아직 데이터가 없습니다.