Flutter 进度条

简介: Flutter 进度条,详细介绍Flutter 提供了多种类型的进度条,可以用于展示应用程序中的长时间运行任务的进度。进度条可以是线性或圆形,可以显示确定进度或不确定进度,可以按照应用程序的主题进行自定义。

Flutter 进度条,详细介绍

Flutter 提供了多种类型的进度条,可以用于展示应用程序中的长时间运行任务的进度。进度条可以是线性或圆形,可以显示确定进度或不确定进度,可以按照应用程序的主题进行自定义。

线性进度条

线性进度条是一条横向的线,显示任务的完成进度。以下是一个基本的线性进度条的示例:

LinearProgressIndicator()

属性

  • value:一个[double]类型的值,表示进度条的完成度。默认值为 null,表示进度条处于不确定状态。
  • backgroundColor:[Color]类型的值,表示进度条的背景色。默认值为[ThemeData]'s accentColor。
  • valueColor:一个[Animation]类型的值,表示进度条的前景色。默认值为[ThemeData]'s accentColor。

圆形进度条

圆形进度条是一个环形的进度条,通常用于表示任务的循环进度。以下是一个基本的圆形进度条的示例:

CircularProgressIndicator()

属性

  • value:一个[double]类型的值,表示进度条的完成度。默认值为 null,表示进度条处于不确定状态。
  • backgroundColor:[Color]类型的值,表示进度条的背景色。默认值为[ThemeData]'s accentColor。
  • valueColor:一个[Animation]类型的值,表示进度条的前景色。默认值为[ThemeData]'s accentColor。

线性进度条样式

Flutter 还提供了多种线性进度条的样式,可以按照应用程序的主题进行自定义。

确定进度

LinearProgressIndicator(
  value: 0.5,
)

不确定进度

LinearProgressIndicator(
  value: null,
)

自定义颜色

LinearProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

圆形进度条样式

Flutter 还提供了多种圆形进度条的样式,可以按照应用程序的主题进行自定义。

确定进度

CircularProgressIndicator(
  value: 0.7,
)

不确定进度

CircularProgressIndicator(
  value: null,
)

自定义颜色

CircularProgressIndicator(
  valueColor: AlwaysStoppedAnimation<Color>(Colors.blue),
)

以上就是 Flutter 进度条的详细介绍。希望能帮助你在应用程序中使用进度条来展示任务的完成进度。

相关文章
|
iOS开发 容器
Flutter 进度条
Flutter 进度条
203 0
|
API 容器
Flutter 自定义实现时间轴、侧边进度条
Flutter 自定义实现时间轴、侧边进度条
491 0
|
容器
Flutter 自定义实现时间轴、侧边进度条
时间轴和侧边进度条是非常常见的 UI 控件,它们可以增强应用的视觉效果和交互体验。在这篇文章中,我们将详细介绍如何使用 Flutter 自定义实现这两个控件。
607 1
|
API Android开发
Flutter控件封装之视频进度条
视频控制器,三方所提供的样式,有时很难满足我们的需求,对于此情况,我们不得不在此基础上自行封装,今天所分享的文章就是一个很简单的控制器封装案例,包含了基本的播放暂停,全屏和退出全屏,以及时间和进度的展示,封装了事件回调以及各个属性的控制,基本上可以满足大部分的业务需求,即便不满足,大家也可以在此基础之上拓展。
494 0
|
10月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
163 1
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
585 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
368 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
9月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
621 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
345 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈