搜尋分類、套件與程式碼儲存庫

animated_shimmer 封面
套件詳情v1.0.0

animated_shimmer

一個簡單且輕量的 widget,用於顯示動畫閃爍效果。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
176
喜歡數
67
Pub 分數
140

安裝套件

flutter pub add animated_shimmer

套件介紹

根據套件公開資料產生的選型評估,僅供參考。

Animated Shimmer 是一個輕量級的 Flutter 套件,提供了一個簡單的 widget 來建立平滑的動畫閃爍效果——常見於 UI 中的載入佔位符。它透過在容器上動畫漸變來模擬內容載入的外觀,為使用者提供資料取得過程中的視覺反饋。此套件易於整合,並支援所有主要平台,包括 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.

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。