Flutter实战（四）---LoadingDialog

已于 2022-08-11 10:52:25 修改
阅读量7.9k 收藏 6
点赞数 2
CC 4.0 BY-SA版权
分类专栏： Android 进阶 文章标签： Flutter loading material design Dialog
于 2019-04-28 11:30:17 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/johnWcheung/article/details/89634582
本文介绍了在Flutter项目中创建LoadingDialog的实践方法，用于在数据加载期间提供过渡反馈，防止用户误解或误操作。内容包括自定义Dialog的实现以及显示和关闭Dialog的步骤。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在实际项目开发中，我们获取数据总会有一个等待过程，为了不让用户迷惑或者误操作，我们一般都会设计一个等待加载框 ，起到一个呈现数据前的过渡作用。

效果：
在这里插入图片描述
实现：

  • 自定义一个等待加载提示框，继承Dialog
/*
 * 自定义等待加载提示框
 * Created by ZhangJun on 2018-11-29
 */

import 'package:flutter/material.dart';

class LoadingDialog extends
了解本专栏 订阅专栏 解锁全文 超级会员免费看
Flutter中的网络请求加载动画：LoadingDialog
MbMobile的博客
09-21 716
当我们向服务器发送请求并等待响应时，为了提供更好的用户体验，通常会显示一个加载动画来表示正在进行网络请求。在本文中，我将向您展示如何创建一个自定义的LoadingDialog，并在网络请求期间显示它。假设您已经有一个网络请求的函数，我们将在该函数中显示LoadingDialog，并在请求完成后关闭它。通过显示一个自定义的LoadingDialog，用户可以清楚地知道应用正在进行网络请求，并获得更好的用户体验。函数中，我们创建并返回LoadingDialog小部件，并传递一个适当的消息。希望这对您有所帮助！
2023年最新Flutter+Getx仿小米商城项目实战视频教程-V3版
luckysuny的博客
11-24 2379
透明导航 、浮动导航、导航动画、六格验证码、Photo-view类似朋友圈图片预览、3、 Flutter Android中使用生物识别认证的一些配置。2、 Flutter中使用socket.io和服务器实现通讯。3、 Flutter中使用socket.io和服务器实现通讯。直播流程（推流、拉流）、借助腾讯云直播、自己搭建直播服务器、4、 Flutter Ios中使用生物识别认证的一些配置。二、 AP模式下Flutter和Wifi模块的数据穿透演示。、Flutter 事件驱动、Flutter本地存储。
flutter 网络加载框 LoadingDialog
仰望星空
12-16 2428
class LoadingDialog extends Dialog { String text; LoadingDialog({Key key, @required this.text}) : super(key: key); @override Widget build(BuildContext context) { return new Material( ...
flutter LoadingDialog
竹子
06-19 477
import 'package:flutter/material.dart'; class LoadingDialog extends Dialog { LoadingDialog( {Key? key, this.text, this.width, this.height, this.color, this.contentPadding = 20}) : super(key: key); final Widg.
Loading、Toast、Dialog 使用与封装：提升用户交互反馈体验 HarmonyOS 5.0.0 或以上
最新发布
2501_92049284的博客
05-14 203
适配版本：HarmonyOS 5.0.0 或以上阅读目标：掌握用户反馈控件的使用方法，快速集成提示框、加载框与交互弹窗，支持二次封装复用。
Flutter - LoadingDialog
iotjin的专栏
03-08 987
使用 showDialog( context: context, builder: (BuildContext context) { return LoadingDialog( title: "加载中...", // ...
调用flutter的Loading框
m0_52467614的博客
10-11 1057
代码出自《Flutter实战·第二版》，7.7.5 其他类型的对话框，2. Loading框。下面的代码构造了一个Loading框，用下面的代码进行调用。
Flutter学习笔记&学习资料推荐
川峰的博客
09-18 3681
对Flutter的学习已经有一段时间了，这里做一下总结记录吧，可能主要是学习资料的总结，还有一些杂七杂八的学习笔记。 Flutter 初体验 先说说对Flutter的感受吧，总的来说上手还是比较容易的，因为他的思想理念跟React十分相似，都是通过状态管理控制UI界面的更新，甚至连setState的方法名都是一样的，如果你是学习过类似React的框架的话，将很容易理解，基本可以直接开撸。但是它有好的地方，也有不好的地方。 好的地方：一个是它的reload热加载到手机，这样写代码调试的时候不用每次运行.
Flutter实战 | 从 0 搭建「网易云音乐」APP（一、创建项目、添加插件、通用代码）...
Flutter笔记
10-10 1473
本系列可能会伴随大家很长时间，这里我会从0开始搭建一个「网易云音乐」的APP出来。下面是该APP 功能的思维导图：因为工作的原因，一星期有可能只更新一篇该系列的文章，不过...
Flutter自定义一个不依赖context的loading提示对话框
City_Coder的博客
06-29 1532
      前段时间自学了dart、flutter，想着学习了又不用那很快就会忘记，于是打算将现有的App项目用flutter写一遍。       写的过程中，发现用flutter写一个网络请求的loading提示不是那么顺手提示，网上搜索了些也没找到满意的、于是仿Android自定义了一个loading，效果图如下：      &n
flutter入门之封装一个加载控件Loading Dialog
热门推荐
不忘初心
06-19 1万+
日常开发中，我们经常会遇到一些耗时加载的应用场景，为了给用户提示，所以我们常常会在加载的时候展示一个加载框，给用户带来较好的体验。 今天我们的内容是封装一个简单易用的加载控件，首先来看一下效果。 由于这个内容比较简单，我们先看一下代码：dialog.dart import 'package:flutter/cupertino.dart'; import 'pa...
Flutter CircularProgressIndicator进度指示器/Loading
03-29
一种材料设计循环进度指示器，它旋转表示应用程序正在忙。 可用于Loading显示，也可以用作进度显示
Flutter工具类（六）loading弹窗
qq_42795723的博客
09-28 1452
Flutter 弹窗
flutter使用get依赖实现全局loading效果，弹窗loading状态
01-15 1932
【代码】flutter使用get依赖实现全局loading效果，弹窗loading状态。
flutter实现一个自定义的LoadingDialog
qq_44756582的博客
07-21 888
实现一个LoadingDialog 基础知识 系统弹窗的基本使用 flutter中使用弹窗应该用flutter提供的showDialog方法 void _showAlertDialog() async { var res = await showDialog( context: context, child: AlertDialog( title: Text('测试'), content: Text('这是一个测试窗口'),
Flutter之Loading框
小小熊的博客
07-24 3485
Flutter之Loading框 创建一个loading框 class LoadingDialog extends Dialog { @override Widget build(BuildContext context) { return Center( child: Material( color: Colors.black38, child: Center( child: SizedBox( wid
flutter弹框怎么封装_flutter入门之封装一个加载控件Loading Dialog
weixin_36087577的博客
01-14 450
日常开发中，我们经常会遇到一些耗时加载的应用场景，为了给用户提示，所以我们常常会在加载的时候展示一个加载框，给用户带来较好的体验。今天我们的内容是封装一个简单易用的加载控件，首先来看一下效果。由于这个内容比较简单，我们先看一下代码：dialog.dartimport 'package:flutter/cupertino.dart';import 'package:flutter/material....
Flutter网络请求关闭Loading对话框
徐代龙的技术专栏
07-12 4752
使用场景 在使用Flutter中，无论是异步任务执行成功与否，都要进行网络请求前的对话框加载，在请求结束后进行对话框的关闭。 面对这种场景，有两种方法， 一种是在then或catch中关闭一下对话框， 第二种就是使用Future的whenComplete回调 代码如下： Future.delayed(new Duration(seconds: 2),(){ //return "hi worl...
Flutter 对话框
海阔天空
05-24 512
Flutter 对话框
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

@ZhangJun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值