Flutter 实现进度条效果

 更新时间:2020年05月18日 14:59:37   作者:动哒  
在一些上传页面炫酷的进度条效果都是怎么实现的,今天小编通过本文给大家分享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))
    ),
    );
   },);
   },
  ),
  ),
 );
 }
}

好了,效果如下:

400.png

总结

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

相关文章

  • Android操作系统介绍之11种传感器

    Android操作系统介绍之11种传感器

    Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,非常不错,具有参考借鉴价值,感兴趣的朋友一起学习吧
    2016-07-07
  • android手机端与PC端使用adb forword通信

    android手机端与PC端使用adb forword通信

    这篇文章主要介绍了android手机端与PC端使用adb forword通信的相关资料,需要的朋友可以参考下
    2017-04-04
  • android读取扫码模组数据的方法

    android读取扫码模组数据的方法

    这篇文章主要为大家详细介绍了android读取扫码模组数据的方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09
  • 基于flutter sound插件实现录音与播放功能

    基于flutter sound插件实现录音与播放功能

    这篇文章主要介绍了基于flutter sound插件实现录音与播放功能,介绍了如何录音,如何播放本地和远程音频文件,以及如何实现动画,在录制完音频文件后如何上传,这些都是我们平常使用这个功能会遇到的问题。在使用的过程中遇到的问题也有列出,需要的朋友可以参考下
    2022-05-05
  • Android使用Flutter实现录音插件

    Android使用Flutter实现录音插件

    这篇文章主要介绍了基于flutter实现录音功能,介绍了如何录音,如何把文件存放到本地,这些都是我们平常使用这个功能会遇到的问题。在使用的过程中遇到的问题也有列出,需要的朋友可以参考下
    2022-08-08
  • 详解Android10的分区存储机制(Scoped Storage)适配教程

    详解Android10的分区存储机制(Scoped Storage)适配教程

    这篇文章主要介绍了详解Android10的分区存储机制(Scoped Storage)适配教程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05
  • 微信小程序 canvas开发实例及注意事项

    微信小程序 canvas开发实例及注意事项

    这篇文章主要介绍了微信小程序 wxcanvas开发实例及注意事项的相关资料,这里对微信canvas与H5中的canvas做对比,并说明注意事项,需要的朋友可以参考下
    2016-12-12
  • Android使用手势监听器GestureDetector遇到的不响应问题

    Android使用手势监听器GestureDetector遇到的不响应问题

    这篇文章主要介绍了Android使用手势监听器GestureDetector遇到的不响应问题,具有很好的参考价值,对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • Flutter BuildContext功能使用详解

    Flutter BuildContext功能使用详解

    这篇文章主要为大家介绍了Flutter BuildContext功能详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-12-12
  • Android列表控件Spinner简单用法示例

    Android列表控件Spinner简单用法示例

    这篇文章主要介绍了Android列表控件Spinner简单用法,结合实例形式分析了Android列表控件Spinner的布局与功能实现技巧,需要的朋友可以参考下
    2017-12-12

最新评论