v2-59ca5fedcfe1bbc1061fd56f87a61116_1440w.jpg?source=172ae18b

前言

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面。

IT界著名的尼古拉斯·高尔包曾说:轮子是IT进步的阶梯!热门的框架千篇一律,好用轮子万里挑一!Flutter作为这两年开始崛起的跨平台开发框架,其第三方生态相比其他成熟框架还略有不足,但轮子的数量也已经很多了。本系列文章挑选日常app开发常用的轮子分享出来,给大家提高搬砖效率,同时也希望flutter的生态越来越完善,轮子越来越多。

本系列文章准备了超过50个轮子推荐,工作原因,尽量每1-2天出一篇文章。

tip:本系列文章合适已有部分flutter基础的开发者,入门请戳:flutter官网

正文

轮子

  • 轮子名称:percent_indicator
  • 轮子概述:flutter一个圆形和线形的进度条.
  • 轮子作者:diego.velasquez.lopez@gmail.com
  • 推荐指数:★★★★
  • 常用指数:★★★
  • 效果预览:

v2-685ffc997980e8e4aea03c25f5a9d7fc_b.gif

功能概述

  • 圆形百分比进度
  • 线形百分比进度
  • 切换动画
  • 自定义动画的持续时间
  • 基于百分比值的进度
  • 进度和背景色
  • 自定义大小
  • 左,右或居中子项用于线性百分比指示器
  • 圆形百分比指示器的顶部,底部或中心widget
  • 使用渐变色

安装

dependencies

使用

圆形进度

基础使用

new 

头部标题+动画:

new 

底部文案+动画+圆角截断:

new 

线型进度

基础使用:

new 

线型进度+进度数字:

new 

线型进度+进度数字+左右内容+动画+矩形边框:

new 

更多用法可自行参考轮子文档中的参数定制。

结尾

  • 轮子仓库地址:https://pub.flutter-io.cn/packages/percent_indicator
  • 系列演示demo源码:https://github.com/826327700/flutter_plugins_demo
Logo

开源鸿蒙跨平台开发社区汇聚开发者与厂商,共建“一次开发,多端部署”的开源生态,致力于降低跨端开发门槛,推动万物智联创新。

更多推荐