Flutter 实现进度条效果

所属分类: 软件编程 / Android 阅读数: 49
收藏 0 赞 0 分享

用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

更多精彩内容其他人还在看

Android 自定义球型水波纹带圆弧进度效果(实例代码)

最近小编接到一个这样的需求,需要实现一个圆形水波纹,带进度,两层水波纹需要渐变显示,且外围有一个圆弧进度。今天小编给大家分享实例代码,感兴趣的朋友一起看看吧
收藏 0 赞 0 分享

Flutter 实现下拉刷新上拉加载的示例代码

这篇文章主要介绍了Flutter 实现下拉刷新上拉加载的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Windows实现Flutter环境搭建及配置这一篇就够了

这篇文章主要介绍了Windows实现Flutter环境搭建及配置这一篇就够了,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

Android利用碎片fragment实现底部标题栏(Github模板开源)

Fragment可以作为Activity的组成部分,一个Activity可以有多个Fragment,这篇文章主要介绍了Android利用碎片fragment实现底部标题栏(Github模板开源),需要的朋友可以参考下
收藏 0 赞 0 分享

android studio 的下拉菜单Spinner使用详解

这篇文章主要介绍了android studio 的下拉菜单Spinner使用详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
收藏 0 赞 0 分享

解析Android 8.1平台SystemUI 导航栏加载流程

这篇文章主要介绍了Android 8.1平台SystemUI 导航栏加载流程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享

Android仿微信录音功能

这篇文章主要为大家详细介绍了Android仿微信录音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android仿微信键盘切换效果

这篇文章主要为大家详细介绍了Android仿微信键盘切换效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android超清晰6.0权限申请AndPermission

这篇文章主要介绍了Android超清晰6.0权限申请AndPermission,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Android仿微信录制语音功能

这篇文章主要介绍了Android仿微信录制语音功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享
查看更多