在发起请求时 需要有loading页面这样可以让用户知道当前正在操作,又可以防止多次点击等误操作,所以这里就自定义了一个loading页面 菊花使用flutter_spinkit里面的菊花来代替

在需要显示loding的地方通过showDialog的弹窗的方式来显示菊花,在需要关闭的时候让dialog关闭

这里使用了flutter_spinkit

flutter_spinkit: ^4.0.0

具体代码

loading.dart

import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart'; class Loading extends StatelessWidget { static void show(BuildContext context) { showDialog(
barrierDismissible: true,
context: context,
builder: (ctx) => Theme(
data: Theme.of(ctx).copyWith(dialogBackgroundColor: Colors.transparent),
child: Loading(),
),
);
} static void dismiss(context) {
Navigator.pop(context);
} @override
Widget build(BuildContext context) {
return Container(
color: Colors.transparent,
child: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
width: 60,
height: 60,
alignment: Alignment.center,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
SpinKitFadingCircle(
color: Colors.black,
size: 46.0,
)
],
),
),
),
);
}
}

关于使用

Loading.show(context);

Loading.dismiss(context);

flutter loading的更多相关文章

  1. flutter 延时函数delay Loading页面

    loading 页面 import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; class Lo ...

  2. 【老孟Flutter】41个酷炫的 Loading 组件库

    老孟导读:目前 loading 库中包含41个动画组件,还会继续添加,同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以. Github 地址:https://github.c ...

  3. Flutter AS设备连接显示loading解决方案

    看了网上很多解决方案,基本都是要杀dart进程后,删除lockfile 文件,然后运行检查命令flutter doctor. 这个方式有一定的意义,但是确实不一定解决这个问题. 今天就遇到了这样的问题 ...

  4. Flutter 让你的Dialog脱胎换骨吧!(Attach,Dialog,Loading,Toast)

    前言 Q:你一生中闻过最臭的东西,是什么? A:我那早已腐烂的梦. 兄弟萌!!!我又来了! 这次,我能自信的对大家说:我终于给大家带了一个,能真正帮助大家解决诸多坑比场景的pub包! 将之前的flut ...

  5. 12 Flutter仿京东商城项目 商品列表页面请求数据、封装Loading Widget、上拉分页加载更多

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  6. 用Flutter开发的跨平台项目,完美运行在Android和IOS上,Material简洁风格,包括启动页、引导页、注册、登录、首页、体系、公众号、导航、项目,还有漂亮的妹子图库,运行极度流畅,结构清晰,代码规范,值得拥有

    Flutter学习资源汇总持续更新中...... Flutter官方网站 Flutter中文网 wendux的Flutter实战 Flutter官方exampleflutter_gallery 阿里巴 ...

  7. Android程序员的Flutter学习笔记

    作为忠实与较资深的Android汪, 最近抽出了一些时间研究了一下Google的亲儿子Flutter, 尚属皮毛, 只能算是个简单的记录吧. Google自2017年第一次提出Flutter, 到20 ...

  8. Flutter 开发小技巧

    1.命令行运行flutter run之后iOS报错:Could not install build/ios/iphones/Runner.app on XXXXX. try lunching Xcod ...

  9. flutter 入口文件配置路由+加载页面

    入口文件配置路由 1.路由信息 -- 加载页面 ,通常用于显示新的内容或者广告,加载完成之后进入主页面 -- 主页面 /app 2.配置页面  main.dart main.dart // main ...

随机推荐

  1. go程序基于阿里云CodePipeline的一次devops实践

    背景 最近朋友有个项目代码托管用的码云,测试服务器(阿里云ECS)只有一台,三四个人开发,于是想基于阿里云的CodePipeline快速打造一套自动化cicd的流程,使用docker来进行多套环境部署 ...

  2. iptables详解(8)iptables自定义链

    自定义链存在的意义:对链进行分类 target可能是一个“动作“也可能是一个”自定义链” 1.新增自定义链. root@ubuntu:~# iptables -t filter -N IN_WEB#结 ...

  3. java开发学生信息管理系统 源码

    开发环境:    Windows操作系统开发工具: Eclipse+Jdk+Tomcat+MYSQL数据库 运行效果图 源码及原文链接:https://javadao.xyz/forum.php?mo ...

  4. ES相关知识

    ElkStack介绍 对于日志来说,最常见的需求就是收集.存储.查询.展示,开源社区正好有相对应的开源项目:logstash(收集).elasticsearch(存储+搜索).kibana(展示),我 ...

  5. fish 设置环境变量;fish shell 相关使用说明记录;

    最近使用 fish进行工作,发现环境变量忘记如何设置: fish 环境变量保存在两个地方: ~ 目录下,.config/fish 目录下: /etc/fish/ 目录下 如果配置所有用户都能用的环境变 ...

  6. Lucene之查询索引

    Query子类 TermQuery:根据域和关键词进行搜索 /** * termQuery根据域和关键词进行搜索 */ @Test public void termQuery() throws IOE ...

  7. appium+python+unittest+HTMLRunner登录自动化测试报告

    环境搭建 python3Java JDK.netFrameworknodejsandroid SDKappiumAppium-Python-Client(pip install Appium-Pyth ...

  8. 使用JDBC分别利用Statement和PreparedStatement来对MySQL数据库进行简单的增删改查以及SQL注入的原理

    一.MySQL数据库的下载及安装 https://www.mysql.com/ 点击DOWNLOADS,拉到页面底部,找到MySQL Community(GPL)Downloads,点击 选择下图中的 ...

  9. CMD命令下图片合成一句话木马命令

    非常简单,我们只需要一张图片1.jpg一句话木马写好的php文件 1.php之后我们进入到命令行.注意:将php文件和图片文件放到同一目录下,cmd也要跳转到放文件的目录下之后执行命令 copy .j ...

  10. #《Essential C++》读书笔记# 第一章 C++ 编程基础

    前言 Stanley B.Lippman 先生所著的<C++ Primer>是学习C++的一本非常优秀的教科书,但<C++ Primer>作为一本大部头书,显然不适合所有的初学 ...