搜索插件、代码仓与 APP 分类

blurry_modal_progress_hud 封面
插件详情v1.1.1

blurry_modal_progress_hud

与 modal_progress_hud 类似,这是一个简单的 widget 包装器,用于启用模态进度 hud(模态进度指示器,hud = 头部显示)

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
514
喜欢数
42
Pub 分数
150

安装插件

flutter pub add blurry_modal_progress_hud

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

BlurryModalProgressHud 是一个 Flutter 小部件,它显示带有模糊背景的模态进度指示器,类似于 ModalProgressHud,但具有更出色的视觉效果。它包装一个组件树,并显示一个遮盖底层内容的加载覆盖层,为用户提供异步操作期间的反馈。模糊效果通过创建现代、半透明的外观来提升 UI。非常适合在多个平台上的加载状态中改善用户体验。

适合场景

  • 在数据获取期间显示加载指示器
  • 通过异步处理增强表单中的用户体验
  • 显示网络请求的进度
  • 在移动应用中创建视觉上吸引人的叠加层
  • 在长时间运行的任务期间提高界面清晰度

主要特点

  • 模糊背景,现代美学
  • 简单包装器集成
  • 跨平台支持(Android、iOS、Web、macOS、Windows、Linux)
  • 可定制的加载指示器
  • 轻量且易于实现

适合对象

  • 寻求精美加载UI的开发者
  • 需要微妙但有效的加载反馈的应用程序
  • 旨在实现 Material Design 3 风格视觉效果的项目
  • 在异步操作期间优先考虑用户体验的团队
  • Flutter 初学者探索进度指示器

使用建议

  • 由于模糊渲染,可能会影响低端设备的性能
  • 需要仔细考虑颜色对比度以确保可读性
  • 不适合高对比度无障碍需求
  • 除了模糊和基本样式外,自定义功能有限
  • 依赖于平台特定的渲染功能

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

blurry_modal_progress_hud

This is a clone and upgrade of modal_progress_hud

Just like modal_progress_hud this is a simple widget wrapper to enable modal progress hud (a modal progress indicator, hud = heads up display)

How it works

Image1

Image2

See example for details

Installation

Add the blurry_modal_progress_hud package to your pubspec.yml file.

dependencies:
  blurry_modal_progress_hud: ^1.1.1

Import the package into your dart file

import 'package:blurry_modal_progress_hud/blurry_modal_progress_hud.dart';

Usage

/// Wrap around any widget that makes an async call to show a modal progress
/// indicator while the async call is in progress.

/// The progress indicator can be turned on or off using [inAsyncCall]

/// The blurry effect's intensity can be be controlled using [blurEffectIntensity]

/// The progress indicator defaults to a [CircularProgressIndicator] but can be
/// any kind of widget. For this example the SpinKitFadingCircle package is used

/// The modal barrier can be dismissed using [dismissible]

/// The opacity of the modal barrier can be set using [opacity]

/// The color of the modal barrier can be set using [color]

/// The progress indicator can be positioned using [offset] otherwise it is
/// centered

BlurryModalProgressHUD(
    inAsyncCall: isLoading,  
    blurEffectIntensity: 4,
    progressIndicator: SpinKitFadingCircle(
    color: purpleColor,
    size: 90.0,
    ),
    dismissible: false,
    opacity: 0.4,
    color: black97Color,
    child: Scaffold(),
);

Options

Most of the parameters can be customized via the constructor

  BlurryModalProgressHUD({
    Key? key,
    required this.inAsyncCall,
    this.opacity = 0.3,
    this.color = Colors.grey,
    this.blurEffectIntensity = 1.0,
    this.progressIndicator = const CircularProgressIndicator(),
    this.offset,
    this.dismissible = false,
    required this.child,
  });

Example

See the example for a complete sample app using the blurry_modal_progress_hud

Contact

Contact me via email edinjoey@gmail.com

所属分类

源码仓库

使用此插件的项目

暂无相关数据。