搜索插件、代码仓与 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

所属分类

源码仓库

使用此插件的项目

暂无相关数据。