Flutter 实现进度条效果

用flutter开发的项目，最大的好处除了跨平台之外，还有一点就是插件多，便于很多功能的实现。

画风（话锋）一转，老子说，事物都有两面性，物极必反。插件多是多，插件带来的问题也是不容小觑，总结下，插件带来的几大问题。

（1）插件更新不及时

插件更新不及时，会导致我们连编译都过不去，甚至要去改插件的原生代码，这个时候，我们可能会自己创建一个github插件，然后直接引用自己的github插件地址，算了，真不靠谱的插件作者！千言万语尽在不言中。。。

（2）插件冲突

插件冲突，有的时候是配置冲突，比如经常遇到的android:resource="@xml/filepaths"/>
同样是在manifest里面，有的插件配置的是filepaths，有的为file_paths，这个也挺痛苦的。

（3）包体积

插件用多了，包体积自然就大了，用户一看这么大的包，下载半天，算了，当然5G来了咱就另说了。

话不多说，解决之道，就4个字：少用插件。

比如进度条插件，之前我还用modal_progress_hud: ^0.1.3，发现没必要，flutter本来就有LinearProgressIndicator，用来做进度显示的。干掉干掉。

上代码：

LinearProgressIndicator(
 value: 0.3,
 valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
 backgroundColor: Colors.blue,
),

其中，value为进度值，valueColor为已经进行的进度颜色，backgroundColor就是还没到的那段进度的颜色咯。

不要着急，上个完整的例子，给你们看效果。

import 'package:flutter/material.dart';

class ProgressDemo extends StatefulWidget {
 ProgressDemo({Key key}) : super(key: key);

 @override
 _ProgressDemoState createState() => _ProgressDemoState();
}

class _ProgressDemoState extends State<ProgressDemo> {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
  appBar: AppBar(
  title: Text('flutter progress demo'),
  ),
  body: Container(
  margin: EdgeInsets.only(top: 20),
  alignment: Alignment.topCenter,
  child: FlatButton(
   child: Text('进度'),
   color: Colors.blue,
   onPressed: () {
   return showDialog(context: context, builder: (context) {
    return AlertDialog(
    backgroundColor: Colors.transparent,
    title: Text('上传中...'),
    content: LinearProgressIndicator(
     value: 0.3,
     valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
     backgroundColor: Colors.blue,
    ),
    shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.all(Radius.circular(10))
    ),
    );
   },);
   },
  ),
  ),
 );
 }
}

好了，效果如下：

总结

到此这篇关于Flutter 一行代码快速实现你的进度条的文章就介绍到这了,更多相关Flutter 一行代码快速实现你的进度条内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Flutter质感设计之进度条

    Flutter质感设计之进度条

    LinearProgressIndicator控件是质感设计中的线性进度指示器,具体内容如下 import 'package:flutter/material.dart'; class ActionViewEcology extends StatelessWidget { /* * 构建函数,传递参数 * 最大能量值 * 最大饥饿值 * 最大情绪值 * 当前能量值 * 当前饥饿值 * 当前情绪值 */ ActionViewEcology({ this.maximumEmergy, this.ma

  • Flutter 实现进度条效果

    用flutter开发的项目,最大的好处除了跨平台之外,还有一点就是插件多,便于很多功能的实现. 画风(话锋)一转,老子说,事物都有两面性,物极必反.插件多是多,插件带来的问题也是不容小觑,总结下,插件带来的几大问题. (1)插件更新不及时 插件更新不及时,会导致我们连编译都过不去,甚至要去改插件的原生代码,这个时候,我们可能会自己创建一个github插件,然后直接引用自己的github插件地址,算了,真不靠谱的插件作者!千言万语尽在不言中... (2)插件冲突 插件冲突,有的时候是配置冲突,比如

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • Javascript+CSS3实现进度条效果

    Javascript+CSS3实现进度条效果

    进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下: 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性. Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的. Clip裁剪的语法如下: .xx {clip:rect(<top>, <right>,

  • ASP.NET实现进度条效果

    ASP.NET实现进度条效果

    我们先看下进度条效果 我点击了按钮后他会显示进度页面,进度完成后,进度条消失,其实也是比较简单的了. 我们需要一个进度条代码文件ProgressBar.htm(注意:是没有head这些标签的) <script language="javascript"> function SetPorgressBar(pos) { //设置进度条居中 var screenWidth = document.body.offsetWidth; ProgressBarSide.style.wid

  • Android打造炫酷进度条效果

    本文实例为大家分享了Android炫酷进度条效果的具体代码,供大家参考,具体内容如下 学习:视频地址 HorizontalProgressbarWithProgress的代码 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.os.Build; imp

  • BootStrap 实现各种样式的进度条效果

    BootStrap 实现各种样式的进度条效果

    Bootstrap提供了各式各样的进度条效果,下面通过实例代码给大家详细介绍,具体详情如下所示: 看下面的例子: <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1&quo

  • 基于fileUpload文件上传带进度条效果的实例(必看)

    基于fileUpload文件上传带进度条效果的实例(必看)

    文件上传过程中,如果我们能看到进度条会更好,实现思路是服务器端用监听器实时监听进度并存入session,客户端异步请求服务器端获得上传进度,并进行效果渲染. 效果图: 服务器端servlet: public class UploadServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException

  • BootStrap实现文件上传并带有进度条效果

    1.做了一天终于做出来了,在上传成功之后,可以将路径添加到数据库,因为一直在烦恼如何在上传成功之后在将路径添加到数据库,终于弄出来了,太开心了,不得不说bootstrap的强大,之前说ajax不能上传文件,之后想办法,用js写,更改了上传文件按钮的样式,但是没想到bootstrap真的太厉害了,样式还不错,可以预览,图片,限制文件的大小,格式等等,还有进度条. 后台的代码在之前写过了 这只有前台的代码 记得:在验证的时候,尽量用控制台来验证,有的时候你的代码写对了,但是有可能alert不显示 c

  • Android编程实现类似于圆形ProgressBar的进度条效果

    Android编程实现类似于圆形ProgressBar的进度条效果

    本文实例讲述了Android编程实现类似于圆形ProgressBar的进度条效果.分享给大家供大家参考,具体如下: 我们要实现一个类似于小米分享中的圆形播放进度条,android自带的圆形ProgressBar是默认自动旋转的,所以无法实现,于是我们想到了使用自定义一个View,来实现这种效果. 首先来看看自己定义的View package cn.easymobi.application.bell.common; import android.content.Context; import an

  • jQuery实现简单的文件上传进度条效果

    jQuery实现简单的文件上传进度条效果

    本文实例讲述了jQuery实现文件上传进度条效果的代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>upload</title> <link rel="stylesheet" type="text/css" href=&quo

随机推荐