분류, 패키지 및 저장소 검색

animated_shimmer 표지
패키지 상세v1.0.0

animated_shimmer

애니메이션된 샤이머 효과를 표시하는 간단하고 가벼운 위젯입니다.

AndroidiOSWebmacOSWindowsLinux
30일 다운로드
176
좋아요
67
Pub 점수
140

패키지 설치

flutter pub add animated_shimmer

패키지 개요

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

Animated Shimmer은 UI의 로딩 플레이스홀더에 흔히 사용되는 부드러운 애니메이션 샤이머 효과를 생성할 수 있는 간단한 위젯을 제공하는 가벼운 Flutter 패키지입니다. 컨테이너 위에서 그라데이션을 애니메이션하여 콘텐츠 로딩 상태를 모방하며, 데이터 가져오기 중 사용자에게 시각적 피드백을 제공합니다. 이 패키지는 쉽게 통합 가능하며 Android, iOS, Web, macOS, Windows, Linux 등 모든 주요 플랫폼을 지원합니다. 지연된 콘텐츠 렌더링이 발생하는 앱에서 인식 속도를 개선하는 데 이상적입니다.

사용 사례

  • 목록 내 로딩 자리표시자
  • 제품 카드용 스켈레톤 화면
  • 데이터 가져오기 중 시각 피드백
  • 느린 로딩 섹션에서의 사용자 경험 향상
  • 프로필 보기에서 자리 차지 애니메이션

주요 기능

  • 최소 설정으로 간단한 API
  • 부드러운 그라데이션 애니메이션
  • 크로스 플랫폼 호환성
  • 경량 사이즈
  • 사용자 정의 가능한 반짝임 방향 및 색상
  • 모든 자식 위젯을 지원합니다

적합한 대상

  • 로딩 상태를 사용하여 UI를 구축하는 개발자
  • 스켈레톤 화면이 필요한 앱
  • 성능과 간결성을 우선시하는 프로젝트
  • 디자이너들이 미세한 애니메이션을 통해 사용자 경험을 향상시키고 있습니다
  • 동적 콘텐츠를 갖춘 모바일 및 웹 애플리케이션

고려 사항

  • 복잡한 애니메이션에 적합하지 않습니다
  • 기본 속성 외의 사용자 정의는 제한적입니다
  • 매우 큰 목록에서는 성능에 영향을 줄 수 있습니다
  • 상태 관리를 수동으로 처리해야 합니다
  • 시각적 혼잡을 피하기 위해 적절히 사용하는 것이 가장 좋습니다

원본 README

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

Animated Shimmer

pub package Libraries.io dependency status for latest release License

Supports Null Safety

A simple & lightweight widget to display an animated shimmer effect.

Making a skeleton of a widget with shimmer effect while loading data from server or any other source is a common task that can be easily done with AnimatedShimmer widget. AnimatedShimmer is a simple yet very useful Widget that developers can use it to create an awesome animated shimmer effect for any widget skeleton loading.

Examples

An example can be found in the example directory of this repository.

More examples will be added soon!

Loading List

How to use

Add animated_shimmer to pubspec.yaml of your project:

dependencies:
  animated_shimmer: ^1.0.0

Import it in your Dart code:

import 'package:animated_shimmer/animated_shimmer.dart';

Declare AnimatedShimmer widget with required height and width:

  AnimatedShimmer(
    height: 10,
    width: 120,
  ),

A number of parameters can be passed to customise the look and feel of this animation:

  AnimatedShimmer(
    height: 10,
    width: 120,
    borderRadius: const BorderRadius.all(Radius.circular(16)),
    delayInMilliSeconds: Duration(milliseconds: index * 500),
  ),

To create round AnimaiedShimmer :

  AnimatedShimmer.round(
    size: 50,
  ),
Parameters:
  • @required height : accepts a double to set height of the shimmer effect
  • @required width : accepts a double to set width of the shimmer effect
  • startColor : accepts a Color and sets the start color of the shimmer effect from which animation will start
  • endColor : accepts a Color and sets the end color of the shimmer effect to which animation will end
  • borderRadius : accepts a borderRadius and sets the border radius of the animated shimmer widget
  • delayInMilliSeconds : accepts a Duration that would be the delay in starting the animation. Default value is Duration(milliseconds: 0)

A detailed API Reference can be found on pub.dev

License

MIT License

Copyright (c) 2022 Shubham Soni

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

카테고리

소스 저장소

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

아직 데이터가 없습니다.