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

overlay_loader_with_app_icon 封面
套件詳情v0.0.4

overlay_loader_with_app_icon

一個 Flutter 套件,在啟動非同步呼叫時顯示帶有應用程式圖示(appIcon)的美觀覆蓋式載入器。

AndroidiOSWebmacOSWindowsLinux
近 30 天下載
360
喜歡數
86
Pub 分數
130

安裝套件

flutter pub add overlay_loader_with_app_icon

套件介紹

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

一個 Flutter 套件,在非同步操作期間顯示視覺上吸引人的覆蓋式載入器,並呈現應用程式的圖示。它提供一種乾淨、使用者友善的方式來表示載入狀態,而不會中斷 UI 流程。載入器會置中顯示於目前螢幕上方,並可透過簡單的 API 呼叫輕鬆控制。專為跨多個平台的無縫整合而設計,可提升資料取得或背景處理過程中的使用者體驗。

適用情境

  • 在 API 呼叫期間顯示載入狀態
  • 指示表單提交的進度
  • 增強資料同步期間的使用者體驗
  • 在異步操作期間顯示應用圖示
  • 在移動和Web應用程式中提供視覺反饋

主要特色

  • 在載入器中顯示應用程式圖示
  • 可自定的覆蓋層外觀
  • 用於顯示/隱藏加載器的簡單 API
  • 跨平台相容性
  • 支援所有主要的 Flutter 平台
  • 非侵入式UI設計

適合對象

  • 尋求優雅加載指示器的開發者
  • 需要一致載入使用者體驗的應用程式
  • 針對多個平台的專案
  • 重視使用者體驗的團隊
  • 使用 Flutter 的前端開發人員

使用建議

  • 需要適當的上下文處理
  • 可能需要為複雜佈局進行自訂
  • 不適用於非常短的操作
  • 應謹慎使用,以避免使用者體驗疲勞
  • 依賴正確的資產配置

原始 README

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

Overlay loader with app icon

A clean and light-weight package that shows a beautiful overlay loader with appIcon when initiating an async call.

Demo App

Getting started

Example

Add package to pubspec.yaml

dependencies:
  ...
  overlay_loader_with_app_icon:

Next, import the library into your widget.

import 'package:overlay_loader_with_app_icon/overlay_loader_with_app_icon.dart';

Usage

To make an async call and display a modal with an appIcon progress indicator while the async call is taking place, wrap [OverlayLoaderWithAppIcon] around any widget. Using the [isLoading] boolean variable, the progress loader can be enabled or disabled.


bool _loading = false;
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: OverlayLoaderWithAppIcon(
        isLoading: _loading,
        appIcon:  Image.asset('images/appIcon.png'),
        child: Container(
       child: Form(...)
    )),
  );
}

More Options

The current parameters are customizable in the constructor

OverlayLoaderWithAppIcon({
  required this.isLoading, 
  required this.child, 
  required this.appIcon, 
  this.appIconSize=50,
  this.borderRadius=15, 
  this.overlayOpacity=0.5, 
  this.circularProgressColor, 
  this.overlayBackgroundColor
});

Thank you for using my package😊🙏🏻

If you need more features

Please open an issue so that we can discuss it

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。