搜尋套件、儲存庫與 APP 分類

progress_indicators 封面
套件詳情v1.0.0

progress_indicators

一些酷炫進度指示器和文字動畫器的精選集合。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
6430
喜歡數
198
Pub 分數
130

安裝套件

flutter pub add progress_indicators

套件介紹

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

一個 Flutter 套件,提供一組視覺上吸引人的進度指示器與文字動畫器。設計用於透過跨多個平台的平滑、可自訂的載入動畫來增強使用者體驗。非常適合用於顯示載入狀態、重新整理內容,或在應用程式中動畫化文字。此套件支援 Android、iOS、Web、macOS、Windows 與 Linux,確保在各裝置上具有一致的效能與外觀。透過 pub add 簡單整合,讓開發者能輕鬆取得現代化的 UI 元素,無需複雜設定。

適用情境

  • 載入畫面
  • 刷新指示器
  • 動畫文字顯示
  • 引導體驗
  • 遊戲載入狀態
  • 互動式應用回饋

主要特色

  • 多種動畫進度樣式
  • 文字動畫工具
  • 跨平台相容性
  • 輕鬆整合
  • 可自訂的顏色和尺寸
  • 輕量且高效能

適合對象

  • UI/UX 設計師
  • 行動應用程式開發者
  • Web 應用程式創建者
  • Flutter 初學者
  • 需要引人注目的加載視覺效果的應用程式
  • 包含動態內容更新的專案

使用建議

  • 僅限視覺增強
  • 無高級狀態管理
  • 不適合複雜動畫
  • 需要手動樣式設定以實現獨特設計
  • 依賴於 Flutter 的渲染引擎
  • 如果過度使用,可能會影響效能

原始 README

以下為關聯原始碼儲存庫的 README 原文快照,最新內容請造訪原始碼儲存庫。

Flutter progress indicators

With this project, we are aiming to provide some cool, animated progress indicators to Flutter developers.

Currently available

Sample

Here's how it looks like.

Usage

Import package:progress_indicators/progress_indicators.dart and use these avaiable widgets:

  • FadingText
  • JumpingText
  • ScalingText
  • JumpingDots
  • HeartbeatProgressIndicator
  • GlowingProgressIndicator
  • CollectionSlideTranstion
  • CollectionScaleTransition

Example

Widget build(BuildContext context) {
    print(Offset(0.0, -1.0).distanceSquared - Offset(0.0, 0.0).distanceSquared);
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new Text('Jumping dots'),
            JumpingDotsProgressIndicator(
              fontSize: 20.0,
            ),
            SizedBox(height: 60.0),
            new Text('Heartbeat'),
            SizedBox(height: 16.0),
            HeartbeatProgressIndicator(
              child: Icon(Icons.home),
            ),
            SizedBox(height: 60.0),
            new Text('Glowing'),
            GlowingProgressIndicator(
              child: Icon(Icons.home),
            ),
            SizedBox(height: 32.0),
            FadingText('Loading...'),
            SizedBox(height: 32.0),
            JumpingText('Loading...'),
            SizedBox(height: 32.0),
            ScalingText('Loading...'),
            SizedBox(height: 32.0),
            CollectionSlideTransition(
              children: <Widget>[
                Icon(Icons.android),
                Icon(Icons.apps),
                Icon(Icons.announcement),
              ],
            ),
            SizedBox(height: 32.0),
            CollectionScaleTransition(
              children: <Widget>[
                Icon(Icons.android),
                Icon(Icons.apps),
                Icon(Icons.announcement),
              ],
            ),
          ],
        ),
      ),
    );
  }

For complete sample, see the this example app.

所屬分類

原始碼儲存庫

使用此套件的專案