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

fancy_shimmer_image 표지
패키지 상세v2.0.3

fancy_shimmer_image

이미지를 쉽게 사용할 수 있도록 해주는 패키지로, 자동으로 캐시되며 로딩 중에 아름다운 실시간(설정 가능) 샤이머 효과를 제공합니다

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
3.3천
좋아요
219
Pub 점수
140

패키지 설치

flutter pub add fancy_shimmer_image

패키지 개요

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

로딩 중 내장된 샤이머 효과를 통해 이미지를 로드하는 것을 단순화하는 플러터 패키지로 사용자 경험을 향상시킵니다. 이미지 캐싱을 자동으로 처리하며 URL 및 리소스와 같은 다양한 이미지 소스를 지원합니다. 샤이머 효과는 커스터마이징 가능하여 개발자가 색상, 지속 시간 및 애니메이션 스타일을 조정할 수 있습니다. 비동기적으로 이미지를 로드하는 리스트 뷰 및 그리드에서 인식되는 성능 향상에 이상적입니다.

사용 사례

  • 스크롤 가능한 목록에 이미지 로드
  • 그리드 레이아웃에서 플레이스홀더 효과 표시
  • 이미지 로딩 중 UI 피드백 향상
  • 이미지가 많은 인터페이스에서 부드러운 전환 만들기
  • 네트워크에 의존하는 앱에서 인식된 성능 향상

주요 기능

  • 자동 이미지 캐싱
  • 사용자 정의 가능한 반짝임 애니메이션
  • 네트워크 및 자산 이미지 지원
  • 사용자 지정 가능한 반짝임 색상 및 지속 시간
  • 실패한 로드를 위한 내장 대체 기능
  • 경량이며 쉽게 통합 가능

적합한 대상

  • 빠른 이미지 자리표시자 찾는 개발자
  • 고주파 이미지 로딩을 하는 앱
  • 시각적 마무리에 집중하는 UI 디자이너
  • 이미지 로딩에 최소한의 보일러플레이트가 필요한 프로젝트
  • 비동기 작업 중 사용자 경험을 우선시하는 팀

고려 사항

  • 초기 번들 크기를 약간 증가시킬 수 있습니다
  • 반짝임 효과는 모든 디자인 테마에 적합하지 않을 수 있습니다
  • 원격 이미지 로드를 위해 인터넷 연결이 필요합니다
  • 기본 애니메이션 설정을 초과한 사용자 정의는 제한적입니다
  • 추가 처리 없이 매우 큰 이미지 컬렉션에 최적화되어 있지 않음

원본 README

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

Buy Me A Coffee

Introduction

Package created for the purpose of uploading images from the internet, giving the possibility of showing a beautiful Shimmer animation while the images are not loading. And it is still possible to create a widget to be shown in case the image upload fails for some reason.

This package is basically a union of two known packages:

Basic Usage

You can use the package on the fly by simple passing a URL of an image to the FancyShimmerImage widget.

FancyShimmerImage(  
  imageUrl: 'https://images.unsplash.com/photo-1465572089651-8fde36c892dd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80',  
),

That will produce a image that's is cacheable by default and that has a default (grey) Shimmer animation. Similar to result below:

enter image description here

More Advanced Usage

If you don't like the default widget behavior, you can set the background colors of the image, the color of the shimmer base effect, and the color of the highlighted effect.

FancyShimmerImage(  
  imageUrl: 'https://static.businessinsider.sg/2018/12/12/5c1c90f8e04d6243c7019cf6.png',  
  shimmerBaseColor: randomColor(),  
  shimmerHighlightColor: randomColor(),  
  shimmerBackColor: randomColor(),  
)

By randomizing the colors you can have a result similar to this:

enter image description here

Other thing you can do is to configure the direction of the Shimmer and it's speed. In the above example i configured it to have top to bottom direction and 300 milliseconds of speed.

enter image description here

One last step you can configure is to configure the widget that will appear in case the image upload fails for some reason. In this case just pass the desired widget in the errorWidget parameter. If no value is passed, a default error widget will be used.

FancyShimmerImage(  
  imageUrl: 'https://static.businessinsider.sg/2018/12/12/5c1c90f8e04d6243c7019cf6.png',  
  errorWidget: Image.network('https://i0.wp.com/www.dobitaobyte.com.br/wp-content/uploads/2016/02/no_image.png?ssl=1'),
)

enter image description here

카테고리

의존성

의존성 목록 2 개

소스 저장소

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

아직 데이터가 없습니다.