服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Flutter 实现进度条效果

Flutter 实现进度条效果

2022-12-15 15:00动哒 Android

在一些上传页面炫酷的进度条效果都是怎么实现的,今天小编通过本文给大家分享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,用来做进度显示的。干掉干掉。

上代码:

?
1
2
3
4
5
LinearProgressIndicator(
 value: 0.3,
 valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
 backgroundColor: Colors.blue,
),

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
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 一行代码快速实现你的进度条的文章就介绍到这了,更多相关Flutter 一行代码快速实现你的进度条内容请搜索服务器之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持服务器之家!

原文链接:https://blog.csdn.net/weixin_29003023/article/details/106181290

延伸 · 阅读

精彩推荐
  • AndroidAndroid开发之实现GridView支付宝九宫格

    Android开发之实现GridView支付宝九宫格

    本文给大家介绍android开发之实现gridview支付宝九宫格,其原理是让每个item都设置成带有分割线的背景,在这不透漏太多内容,感兴趣的朋友请阅读全文...

    一叶飘舟11562021-04-13
  • AndroidAndroid实现圆形纯数字按钮

    Android实现圆形纯数字按钮

    这篇文章主要为大家详细介绍了Android实现圆形纯数字按钮,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    WhatYouSeeMe5322022-09-23
  • AndroidAndroid中阻止AlertDialog关闭实例代码

    Android中阻止AlertDialog关闭实例代码

    这篇文章主要介绍了Android阻止AlertDialog关闭实例代码的相关资料,需要的朋友可以参考下...

    Hi.wz5032021-06-28
  • AndroidAndroid调节屏幕亮度实现代码

    Android调节屏幕亮度实现代码

    这篇文章主要介绍了Android调节屏幕亮度实现代码,调节屏幕亮度时,先设置当前activity亮度,再并保存为系统亮度即可,本文分别给出两个步骤的实现代码,需要...

    安卓之家11482021-03-19
  • AndroidAndroid-ViewModel和LiveData使用详解

    Android-ViewModel和LiveData使用详解

    这篇文章主要介绍了Android-ViewModel和LiveData使用详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...

    码农小白0076862022-12-05
  • AndroidAndroid实现调用摄像头

    Android实现调用摄像头

    本文给大家分享的是,在安卓APP开发的过程中,经常会需要调用手机自身摄像头拍照的代码,十分的简单实用,有需要的小伙伴可以参考下。...

    Android开发网15132021-03-27
  • AndroidAndroid Studio如何获取SQLite数据并显示到ListView上

    Android Studio如何获取SQLite数据并显示到ListView上

    这篇文章主要介绍了Android Studio获取SQLite数据并显示到ListView上,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值...

    小李也有春天11572022-12-06
  • AndroidAndroid手机获取IP地址的两种方法

    Android手机获取IP地址的两种方法

    这篇文章主要介绍了Android手机获取IP地址的两种方法,本文分别讲解了WIFI和GPRS两种情况下各自获取手机IP地址的方法,需要的朋友可以参考下...

    Android开发网11462021-03-22