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),'心情（$currentMood/$maximumMood）'),new LinearProgressIndicator(value: currentMood/maximumMood),]
      )
    );
  }
}

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