Flutter质感设计之进度条

LinearProgressIndicator控件是质感设计中的线性进度指示器，具体内容如下

import 'package:flutter/material.dart';
class ActionViewEcology extends StatelessWidget {
 /*
  * 构建函数，传递参数
  * 最大能量值
  * 最大饥饿值
  * 最大情绪值
  * 当前能量值
  * 当前饥饿值
  * 当前情绪值
  */
 ActionViewEcology({
  this.maximumEmergy,
  this.maximumHunger,
  this.maximumMood,
  this.currentEmergy,
  this.currentHunger,
  this.currentMood,
 });
 int maximumEmergy;
 int maximumHunger;
 int maximumMood;
 int currentEmergy;
 int currentHunger;
 int currentMood;
 // 获取进度条描述文本
 Align _getNameText(BuildContext context, String text) {
  return new Align(
   alignment: FractionalOffset.topLeft,
   child: new Text(
    text,
    style: new TextStyle(
     fontSize: 15.0,
     color: Colors.black,
     height: 1.5,
    )
   )
  );
 }
 @override
 Widget build(BuildContext context) {
  return new Container(
   margin: const EdgeInsets.fromLTRB(17.0, 0.0, 17.0, 10.0),
   child: new Column(
    children: <Widget> [
     _getNameText(context, '能量（$currentEmergy/$maximumEmergy）'),
     new LinearProgressIndicator(value: currentEmergy/maximumEmergy),
     _getNameText(context, '饥饿（$currentHunger/$maximumHunger）'),
     new LinearProgressIndicator(value: currentHunger/maximumHunger),
     _getNameText(context, '心情（$currentMood/$maximumMood）'),
     new LinearProgressIndicator(value: currentMood/maximumMood),
    ]
   )
  );
 }
}

在main.dart中调用上面的ActionViewEcology类，传入相关参数，效果如下：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • flutter实现仿boss直聘功能

    flutter实现仿boss直聘功能

    Flutter是Google使用Dart语言开发的移动应用开发框架,使用一套Dart代码就能构建高性能.高保真的iOS和Android应用程序,并且在排版.图标.滚动.点击等方面实现零差异. 2年前,RN刚出来时做了个仿拉钩的demo,react-native-lagou. 这次flutter来了,想感受一下,索性用目前flutter的版本写的一个仿boss直聘应用. 时间有限,没完全仿照,去掉了一些功能,但是界面风格一致,有参考价值. github地址:flutter仿boss直聘. 感悟 与

  • Flutter启动流程的深入解析

    Flutter启动流程的深入解析

    前言 Flutter是怎么启动起来的,是在Android的Activity的启动之后吗?等等这样的问题,在这个文章中将被解答. 从MainActivity开始 新创建一个Flutter项目,在清单文件中默认被启动的Activity是MainActivity,而MainActivity继承的是FlutterActivity.那么问题好像简单了,我们分析一下FlutterActivity,下面是MainActivity的代码. public class MainActivity extends Fl

  • Flutter实现页面切换后保持原页面状态的3种方法

    Flutter实现页面切换后保持原页面状态的3种方法

    前言: 在Flutter应用中,导航栏切换页面后默认情况下会丢失原页面状态,即每次进入页面时都会重新初始化状态,如果在initState中打印日志,会发现每次进入时都会输出,显然这样增加了额外的开销,并且带来了不好的用户体验. 在正文之前,先看一些常见的App导航,以喜马拉雅FM为例: 它拥有一个固定的底部导航以及首页的顶部导航,可以看到不管是点击底部导航切换页面还是在首页左右侧滑切换页面,之前的页面状态都是始终维持的,下面就具体介绍下如何在flutter中实现类似喜马拉雅的导航效果 第一步:实

  • Flutter实现底部导航栏效果

    Flutter实现底部导航栏效果

    大家最近都在讨论新鲜技术-flutter,小编也在学习中,遇到大家都遇到的问题,底部导航.下面给大家贴出底部导航的编写,主要参考了lime这个项目. 上代码 一.在main.dart文件中 定义APP的基本信息 class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return new

  • Flutter Android端启动白屏问题的解决

    问题描述 Flutter 应用在 Android 端上启动时会有一段很明显的白屏现象,白屏的时长由设备的性能决定,设备性能越差,白屏时间越长. 问题分析 其实启动白屏的问题在Android原生应用上也是一个常见问题,大致是因为从用户点击 Launcher Icon 到应用首页显示之间,Android 系统在完成应用的初始化工作,其流程如下: 在 Flutter Android 端上,白屏的问题会更加严重,因为除了 Android 应用启动耗时外,还增加了 Flutter 初始化耗时. 直到 Fl

  • Flutter启动页(闪屏页)的具体实现及原理详析

    Flutter启动页(闪屏页)的具体实现及原理详析

    为什么要有启动页? 在以下文章中,启动页就是闪屏页. 现在大部分App都有启动页,那么为什么要有启动页?这是个值得思考的问题,如果没有启动页会怎样,大部分的App会白屏(也有可能是黑屏,主题设置有关系)非常短的时间,然后才能展示App的内容. 那么问题来了,一定要有启动页吗?答案:不是,而且是尽可能不要有启动页,因为启动页会让用户体验不够连贯,甚至IOS在开发手册上就不推荐使用启动页. 我们深入思考一下,既然不推荐为什么这样流行,答案非常简单,启动页的成本非常低,如果你想把的App启动优化到一个

  • Flutter中ListView 的使用示例

    Flutter中ListView 的使用示例

    这个小例子使用的是豆瓣 API 中 正在上映的电影 的开放接口,要实现的主要效果如下: JSON 数据结构 Item 结构 Item 的结构是一个 Card 包含着一个 Row 然后这个 Row 里面左边是一个 Image ,右边是一个 Column 功能实现 material 库 Json 解析 网络请求 加载菊花 要实现上面四个功能,我们首先需要在 .dart 文件中引入如下代码 import 'dart:convert'; import 'package:http/http.dart' a

  • Flutter路由的跳转、动画和传参详解（最简单）

    路由 做Android/iOS原生开发的时候,要打开一个新的页面,你得知道你的目标页面对象,然后初始化一个Intent或者ViewController,再通过startActivity或者pushViewController来推出一个新的页面,不能跟web一样,直接丢一个链接地址就跳转到新的页面.当然,可以自己去加一个中间层来实现这些功能. Flutter里面是原生支持路由的.Flutter的framework提供了路由跳转的实现.我们可以直接使用这些功能. Flutter路由介绍 Flutte

  • Flutter质感设计之弹出菜单

    PopupMenuButton控件即弹出菜单控件,点击控件会出现菜单. import 'package:flutter/material.dart'; class MenusDemo extends StatefulWidget { @override _MenusDemoState createState() => new _MenusDemoState(); } class _MenusDemoState extends State<MenusDemo> { String _body

  • Flutter进阶之实现动画效果（一）

    Flutter进阶之实现动画效果（一）

    上一篇文章我们了解了Flutter的动画基础,这一篇文章我们就来实现一个图表的动画效果. 首先,我们需要创建一个新项目myapp,然后把main.dart的内容替换成下面的代码 import 'package:flutter/material.dart'; import 'dart:math'; void main() { runApp(new MyApp()); } class MyApp extends StatelessWidget { @override Widget build(Bui

随机推荐