`
iaiai
  • 浏览: 2203269 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

flutter loading、Progress进度条

 
阅读更多
Flutter Progress

1 条形无固定值进度条

        //LinearProgressIndicator不具备设置高度的选项,可以使用SizedBox来设置高度与宽度
        SizedBox(
          child: LinearProgressIndicator(),
          height: 8.0,
          width: 200,
        ),


2 圆形无固定值进度条

        SizedBox(
          child: CircularProgressIndicator(),
          height: 44.0,
          width: 44.0,
        ),


3 条形固定值进度条

        new SizedBox(
          //限制进度条的高度
          height: 6.0,
          //限制进度条的宽度
          width: 200,
          child: new LinearProgressIndicator(
              //0~1的浮点数,用来表示进度多少;如果 value 为 null 或空,则显示一个动画,否则显示一个定值
              value: 0.3,
              //背景颜色
              backgroundColor: Colors.yellow,
              //进度颜色
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)),
        ),


4 圆形固定值进度条

        //CircularProgressIndicator不具备设置高度的选项,可以使用SizedBox来设置高度与宽度
        new SizedBox(
          //限制进度条的高度
          height: 40.0,
          //限制进度条的宽度
          width: 40,
          child: new CircularProgressIndicator(
            //0~1的浮点数,用来表示进度多少;如果 value 为 null 或空,则显示一个动画,否则显示一个定值
              value: 0.3,
              //背景颜色
              backgroundColor: Colors.yellow,
              //进度颜色
              valueColor: new AlwaysStoppedAnimation<Color>(Colors.red)),
        ),
分享到:
评论

相关推荐

    圆形进度条(弧形刻度)CircleProgress

    在项目中引入`SeekCircle`库后,我们可以在布局XML文件中添加`CircleProgress`控件,通过设置属性如`progress_color`(进度颜色)、`background_color`(背景颜色)、`progress`(当前进度)等来控制进度条的外观和...

    Flutter Slider 进度条

    Flutter Slider 进度条

    Flutter CircularProgressIndicator进度指示器/Loading

    一种材料设计循环进度指示器,它旋转表示应用程序正在忙。 可用于Loading显示,也可以用作进度显示

    Flutter中使用进度条seekbar

    效果图 引入依赖 flutter_seekbar: git: https://github.com/LiuC520/flutter_seekbar.git 全量demo代码 ...简化demo效果 ...import 'package:flutter_seekbar/flutter_seekbar.dart'; void main() =&gt;

    flutter_progress_button:flutter_progress_button

    flutter_progress_button flutter_progress_button是一个免费且开放源代码(MIT许可)的Material Flutter Button,它支持各种按钮样式要求。 它被设计为易于使用和可定制的。 开始吧 依靠它 将此添加到包的pubspec....

    Flutter 实现进度条效果

    除了 LinearProgressIndicator 组件外,我们还可以使用其他控件来实现进度条效果,例如使用 CircularProgressIndicator 组件来实现圆形进度条效果。 在实现进度条效果时,我们需要注意插件的问题。插件可以扩展 ...

    flutter-progress-indicator:一个简单的小部件,可用于显示任务的当前进度

    在Flutter的基础库中,有多种内置的进度指示器,如CircularProgressIndicator(圆形进度条)和LinearProgressIndicator(线性进度条)。然而,这些基本组件可能无法满足所有设计需求,例如自定义颜色、形状或者动画...

    自定义圆形进度条(带圆点)

    本示例中,我们探讨的主题是如何创建一个自定义的圆形进度条,并且带有圆点效果。这个控件可以用于显示某个任务的完成度或者加载状态,通过调整颜色和属性,使其更加符合应用程序的视觉风格。 首先,我们需要创建一...

    Flutter质感设计之进度条

    在Flutter开发中,质感设计(Material Design)是一种广泛采用的用户界面设计规范,它提供了丰富的组件和动画效果,使得应用的界面美观且易用。在质感设计中,进度条(LinearProgressIndicator)是一个常见的组件,...

    step-progress-indicator:开源Flutter程序包,条形指示器由一系列选定和未选定的步骤组成

    dependencies : flutter : sdk : flutter step_progress_indicator : ^0.2.5+8水平的垂直的通告1通告2例子 StepProgressIndicator-示例1 StepProgressIndicator ( totalSteps : 10 ,) StepProgressIndicator-示例2 ...

    flutter_web_loading_animation:为Flutter Web App启动加载加载动画

    "flutter_web_loading_animation"项目正为此目的而设计,它提供了一个启动加载动画,使得Flutter Web App在加载过程中不会显得过于空白和无响应,从而提高用户对应用程序的第一印象。 1. **Flutter Web与加载动画**...

    使用进度条指示进度

    在压缩包文件中的"progress"文件,可能包含了一个简单的示例项目,展示如何在C#中实现上述功能。通过查看和学习这个项目,你可以更直观地了解这些控件和属性的使用方法。 总的来说,使用进度条和timer控件是提供...

    Flutter 进度条使用

    在 Flutter 开发中,进度条是用户界面中常见的组件,用于展示任务的完成度或让用户进行数值选择。本文将深入探讨 Flutter 中的进度条使用及其关键属性,包括标准的 `Slider` 组件以及模仿苹果风格的 `...

    loading_more_list:支持ListView,GridView,WaterfallFlow和Sliver的更多加载列表

    loading_more_list 支持ListView,GridView,WaterfallFlow和Sliver的更多加载列表。 语言:英语| 瀑布流 Sliver / CustomScrollView 指标状态 垃圾收集 视口构建器 LastChildLayoutType 接近尾随 用 将库添加...

    loading-animations:Flutter软件包,其中包含一组简单但非常可定制的加载动画集

    Flutter项目的一组简单但非常可定制的加载动画。 安装 将以下内容添加到您的pubspec.yaml文件中: ... dependencies : ... loading_animations : " ^2.1.0 " ... 然后将文件导入到您的项目中: import '...

    flutter中使用基于flutter-sound的flutter-sound-record录音

    在Flutter开发中,录音功能是许多应用程序不可或缺的一部分。Flutter本身并不提供原生的录音API,但开发者可以借助第三方库来实现这一功能。本篇将详细讲解如何在Flutter中使用基于`flutter-sound`的`flutter-sound-...

    Flutter 项目:flutter的安装和环境配置

    ### Flutter项目:Flutter的安装与环境配置 #### 一、系统要求 为了成功地安装和运行Flutter,您的Windows环境必须符合以下系统要求。 ##### 硬件要求 **最低要求**: - **CPU**: x86_64架构 - **核心数**: 至少...

    Flutter Stepper 步骤

    Flutter Stepper 步骤

Global site tag (gtag.js) - Google Analytics