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

progress_dialog_null_safe 封面
插件详情v3.1.0

progress_dialog_null_safe

一个轻量级、空安全的 Flutter 包,用于显示可自定义的进度对话框,支持动态内容更新和多种样式选项。

AndroidiOSWebmacOSWindowsLinux
近 30 天下载
3000
喜欢数
46
Pub 分数
140

安装插件

flutter pub add progress_dialog_null_safe

插件介绍

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

一个轻量级、空安全的 Flutter 包,用于显示可自定义的进度对话框。它支持动态内容更新,并提供多种样式选项,确保在各个平台上的 UI 一致性。非常适合在异步操作期间显示加载状态,保证类型安全并在 Android、iOS、Web、macOS、Windows 和 Linux 上提供流畅的用户体验。该包易于集成和维护,适用于需要在数据处理过程中提供响应式反馈的应用。

适合场景

  • 在 API 调用期间显示加载状态
  • 动态更新对话框文本
  • 显示文件上传过程中的进度
  • 在后台任务期间提供反馈
  • 自定义外观以保持品牌一致性

主要特点

  • 空值安全设计
  • 动态内容更新
  • 多平台支持
  • 可自定义的样式
  • 轻量且快速
  • 与 Flutter 的轻松集成

适合对象

  • 开发跨平台 Flutter 应用的开发者
  • 注重类型安全的团队
  • 需要响应式加载指示器的应用程序
  • 依赖项最少的项目
  • 频繁执行异步操作的UI密集型应用

使用建议

  • 需要 Flutter 2.5 或更高版本
  • 仅限基本进度可视化
  • 无内置取消处理
  • 最适合简单的加载场景
  • 可能需要额外的逻辑来处理复杂的工作流

原始 README

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

progress_dialog

A light weight package to show progress dialog. As it is a stateful widget, you can change the text shown on the dialog dynamically.

This is the original package and it's owner https://github.com/fayaz07/progress_dialog

It was discontinued by him, but i really liked the package so I am trynna revive it :D I added null safety and updated most of the stuff making it null safe and useable again :)

Demo

Normal dialog Demo Download dialog Demo

How to use

Import the package in your dart file

import 'package:progress_dialog/progress_dialog_null_safe.dart';

Create and initialise a ProgressDialog object inside the build() method passing context to it

  1. Initialize the ProgressDialog object
    final ProgressDialog pr = ProgressDialog(context);
    
  2. By default it is a normal dialog to show some message, if you would like to use it to show percentage of progress done, specify the optional type parameter and specify if you want your dialog to dismiss when back button is pressed isDismissible parameter (Optional)
    //For normal dialog
    pr = ProgressDialog(context,type: ProgressDialogType.Normal, isDismissible: true/false, showLogs: true/false);
        
    //For showing progress percentage
    pr =  ProgressDialog(context,type: ProgressDialogType.Download, isDismissible: true/false, showLogs: true/false);
    
  3. > Note: Please initialize the ```ProgressDialog```, where you have availability of the context
  4. Style the progress dialog (Optional)
    pr.style(
      message: 'Downloading file...',
      borderRadius: 10.0,
      backgroundColor: Colors.white,
      progressWidget: CircularProgressIndicator(),
      elevation: 10.0,
      insetAnimCurve: Curves.easeInOut,
      progress: 0.0,
      textDirection: TextDirection.rtl,
      maxProgress: 100.0,
      progressTextStyle: TextStyle(
         color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
      messageTextStyle: TextStyle(
         color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600)
      );
    
    Note: You don't need to use all parameters, all of them are optional
    
  5. Showing the progress dialog
    await pr.show();
    
  6. Dynamically update the content shown out there
    pr.update(
      progress: 50.0,
      message: "Please wait...",
      progressWidget: Container(
        padding: EdgeInsets.all(8.0), child: CircularProgressIndicator()),
      maxProgress: 100.0,
      progressTextStyle: TextStyle(
        color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400),
      messageTextStyle: TextStyle(
        color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600),
      );
    
    Note: You don't need to use all parameters, all of them are optional
    
  7. Dismissing the progress dialog
    pr.hide().then((isHidden) {
      print(isHidden);
    });
    
    // or
    await pr.hide();
    

Navigating to next screens must be done after the completion of Future - hide(). See here for example

Check if progress dialog is showing
bool isProgressDialogShowing = pr.isShowing();
print(isProgressDialogShowing);
Use custom body
    pr = ProgressDialog(
      context,
      type: ProgressDialogType.Normal,
      isDismissible: true,
      /// your body here
      customBody: LinearProgressIndicator(
        valueColor: AlwaysStoppedAnimation<Color>(Colors.blueAccent),
        backgroundColor: Colors.white,
      ),
    );

Demo

Normal dialog Demo Download dialog Demo

Default configuration/styles

If you don't like to configure/style the dialog and continue with the default style, it's okay but just have a look at our default configuration.

Attribute Value
Dismissible true
ProgressDialogType ProgressDialogType.Normal
BackgroundColor Colors.white
BorderRadius RoundedRectangularBorder(radius: 8.0)
AnimationCurve Curves.easeInOut
Elevation 8.0
ProgressWidget Double_rings_loding_indicator
MessageTextStyle color: Colors.black, fontSize: 19.0, fontWeight: FontWeight.w600
ProgressTextStyle color: Colors.black, fontSize: 13.0, fontWeight: FontWeight.w400
showLogs false
Well let's discuss limits for configuring it
Attribute Can be updated during instantiating Can be updated during styling Can be updated during dialog is shown
Dismissible Yes No No
ProgressDialogType Yes No No
BackgroundColor No Yes No
BorderRadius No Yes No
AnimationCurve No Yes No
Elevation No Yes No
ProgressWidget No Yes Yes
MessageTextStyle No Yes Yes
ProgressTextStyle No Yes Yes
ShowLogs Yes No No

Loading indicator -> https://loading.io/

所属分类

源码仓库

使用此插件的项目

暂无相关数据。