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

pro_animated_blur 표지
패키지 상세v0.0.2+1

pro_animated_blur

ProAnimatedBlur는 자식 위젯의 아래 영역을 흐리게 하는 위젯이며, AnimatedContainer, AnimatedOpacity와 같이 작동합니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
6
좋아요
72
Pub 점수
160

패키지 설치

flutter pub add pro_animated_blur

패키지 개요

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

ProAnimatedBlur는 자식 아래의 콘텐츠를 동적으로 흐리게 하는 Flutter 위젯으로, AnimatedContainer 및 AnimatedOpacity와 유사한 부드러운 전환 효과를 제공합니다. 개발자들은 시간이 지남에 따라 블러 강도를 애니메이션하여 오버레이, 모달 또는 동적 UI 요소에 시각적으로 매력적인 효과를 만들 수 있습니다. 이 위젯은 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원하며 장치 간 일관된 동작을 보장합니다. 성능을 고려해 제작되었으며 기존의 Flutter 앱에 쉽게 통합될 수 있습니다.

사용 사례

  • 애니메이션 배경 흐림 효과 만들기
  • 동적 블러를 사용한 플로팅 UI 요소 디자인
  • 모달에서 부드러운 전환 구현
  • 계층적 인터페이스에서 시각적 깊이 향상
  • 블러 애니메이션을 사용하여 반응형 오버레이 만들기

주요 기능

  • AnimatedContainer와 유사한 부드러운 블러 애니메이션
  • 모든 플러터 플랫폼을 지원합니다
  • 최소한의 성능 영향으로 효율적인 렌더링
  • 기존 위젯과의 간편한 통합
  • 사용자 정의 가능한 블러 반경 및 지속 시간

적합한 대상

  • 고급 시각 효과를 원하는 UI 디자이너
  • 현대적이고 애니메이션 효과가 있는 인터페이스를 개발하는 개발자
  • 동적 배경 흐림을 필요로 하는 앱
  • 크로스 플랫폼 일관성을 목표로 하는 팀
  • 시각적 완성도와 상호작용을 강조하는 프로젝트

고려 사항

  • 저사양 기기에서 성능에 영향을 미칠 수 있습니다
  • 블러 품질은 장치의 기능에 따라 달라집니다
  • 애니메이션 지속 시간을 신중하게 조정해야 합니다
  • 고주기 업데이트에 적합하지 않음
  • 블러 반경과 시간 외의 사용자 지정은 제한적입니다

원본 README

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

ProAnimatedBlur

  • pub.dev page: https://pub.dev/packages/pro_animated_blur

  • ProAnimatedBlur is a Flutter package that is very similar to other 'Animated' widgets such as AnimatedContainer, AnimatedOpacity, etc. *

  • Animates between different blur properties without needing a dedicated animation controller because it is auto-handled*

  • It blurs the background of the child widget.

Some usecases:

  • When a modal (popup window) is used, wrap the route with ProAnimatedBlur in order to blur the rest of the screen (you can blur the dark shaded dismissible barrier area)
  • Wrap any of your containers to make a frosted glass style.

Features

The example app looks like this:

ProAnimatedBlur_short_gif

Getting started

Add the dependency in pubspec.yaml:

dependencies:
  pro_animated_blur: ^0.0.1

  # It is recommended to use latest version.

Import it:

Now in your Dart code, you can use:

import 'package:pro_animated_blur/pro_animated_blur.dart';

Usage

  return Container(
    clipBehavior: Clip.antiAlias, // Use a clip  option.
    child: ProAnimatedBlur(
      blur: _isBlurred ? 20 : 0,
      duration: Duration(milliseconds: 200),
      curve: Curves.linear,
      child: Container(
        height: 200,
        width: 200,
      ),
    ),
  );

Author

Yasin Arık

Email: [yasin.ariky@gmail.com](mailto:yasin.ariky@gmail.com)

GitHub: github.com/yasinarik

LinkedIn: linkedin.com/in/yasinarik

카테고리

소스 저장소

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

아직 데이터가 없습니다.