flutter 实现进度条效果-kb88凯时官网登录

时间:2020-05-18
阅读:
免费资源网 - https://freexyz.cn/

用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(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 {
 @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(colors.red),
     backgroundcolor: colors.blue,
    ),
    shape: roundedrectangleborder(
     borderradius: borderradius.all(radius.circular(10))
    ),
    );
   },);
   },
  ),
  ),
 );
 }
}

好了,效果如下:

免费资源网 - https://freexyz.cn/
返回顶部
顶部
网站地图