一个简单的BMI计算APP

效果截图
- 初始化
- 布局
- - 顶部区域
  - - 标题
    - 计算结果
    - 组合顶部区域
    - 背景
  - 中间区域
  - - 输入框
    - 输入行
    - 计算按钮
    - 分界线
    - 组合中间区域
  - 底部区域
  - 页面组合
- BMI计算
- Toast弹窗
- - 效果
  - 导入依赖
  - 封装

效果截图

初始化

初始化表单控制器和焦点节点

void initView(){formKey = GlobalKey<FormState>();heightController = TextEditingController();weightController = TextEditingController();heightNode = FocusNode();weightNode = FocusNode();}

为体重和升高焦点节点进行事件监听，并改变状态标志位

void addListener(){heightNode.addListener(() {if(heightController.text.isNotEmpty){heightClear = true;}else{heightClear = false;}});weightNode.addListener(() {if(weightController.text.isNotEmpty){weightClear = true;}else{weightClear = false;}});}

布局

顶部区域

标题

没有使用系统标题栏，通过将Text文本放到中间，作为标题使用

 ///标题Widget title = Center(child: Text(titleText,style: getTextStyle(18.0, Colors.white, FontWeight.bold),));

计算结果

身体状况和标准体重通过Expanded各占一半宽度，并各执一边

///结果匹配值Widget physical = Row(children: [Expanded(child: Text(body,style: getTextStyle(12.0, Colors.white, FontWeight.normal),textAlign: TextAlign.left,)),Expanded(child: Text(standardWeight,style: getTextStyle(12.0, Colors.white, FontWeight.normal),textAlign: TextAlign.right))],);

组合顶部区域

然后通过Column进行垂直排列，其中使用const SizedBox(height: 30.0,）做完高度间隔分隔符

///BMI计算结果Widget bmiResult = Column(children: [const SizedBox(height: 40.0,),title,const SizedBox(height: 30.0,),Align( alignment:Alignment.topLeft ,child: Text('BMI',style: getTextStyle(14.0, Colors.white, FontWeight.bold))),const SizedBox(height: 10.0,),Align( alignment:Alignment.topLeft ,child: Text(bmi,style: getTextStyle(24.0, Colors.white, FontWeight.bold))),const SizedBox(height: 20.0,),physical,const SizedBox(height: 20.0,),Align( alignment:Alignment.topLeft ,child: Text(diseaseTip,style: getTextStyle(12.0, Colors.white, FontWeight.normal))),],);

背景

最后将上列用Container但布局进行包裹，并设置背景颜色

Widget topArea = Container(color: Colors.green,padding: const EdgeInsets.all(20.0),child: bmiResult,);

中间区域

中间区域包括两个输入框和计算按钮

输入框

身高和体重输入行一致，此处以身高为例；身高TextFormField包括啦上述初始化的控制权和焦点节点，并添加了一个末尾Icon,当输入内容不为空时，显示清空按钮，并对点击事件做清空处理，在onSaved中对输入的内容进行保存

   /*** 身高输入框*/Widget heightArea = Container(padding: const EdgeInsets.all(2.0),decoration: const BoxDecoration(shape: BoxShape.rectangle,borderRadius: BorderRadius.all(Radius.circular(5.0)),color: Colors.white30),child: TextFormField(maxLines: 1,keyboardType: TextInputType.number,controller: heightController,focusNode: heightNode,decoration: InputDecoration(hintText: '请输入身高',hintStyle: getTextStyle(14.0, Colors.grey, FontWeight.normal),border: InputBorder.none,suffixIcon: heightClear ?IconButton(onPressed: (){heightController.clear();},icon: const Icon(Icons.clear)) : null),onSaved: (value){inputHeight = value.toString();},),);

输入行

然后用Row布局水平排列，同样使用 const SizedBox(width: 20.0,)做水平间隔分隔符

/*** 身高行*/Widget height = Row(children: [Text('身高',style: getTextStyle(16.0, Colors.grey, FontWeight.bold),),const SizedBox(width: 20.0,),Expanded(child: heightArea),const SizedBox(width: 20.0,),Text('CM',style: getTextStyle(16.0, Colors.grey, FontWeight.bold),),],);

计算按钮

然后使用ElevatedButton，并对点击事件做计算处理

  ///计算按钮Widget calculateButton = SizedBox(width: 300.0,height: 50.0,child: ElevatedButton(onPressed: (){if(formKey.currentState!.validate()){formKey.currentState!.save();//do calculate tingsBMICalculate(inputHeight,inputWeight);}},style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.green),),child: Text('开始计算',style: getTextStyle(16.0, Colors.white, FontWeight.bold),),),);

分界线

 /// 分界线Widget splitLine = const SizedBox(height: 1.0,width: double.infinity,child: DecoratedBox(decoration: BoxDecoration(color: Colors.grey),),);

组合中间区域

并对表单进行监听，并通过Column进行子组件布局

Widget centerArea = Form(key: formKey,child:  Container(padding: const EdgeInsets.all(20.0),child: Column(children: [height,const SizedBox(height: 10.0,),splitLine,const SizedBox(height: 40.0,),weight,const SizedBox(height: 10.0,),splitLine,const SizedBox(height: 30.0,),standardTip,const SizedBox(height: 40.0,),calculateButton,],),));

底部区域

底部使用的是Table表格进行布局，TableRow为行，TableCell为列，也可不使用TableCell进行布局，可输入自己需要的内容组件

Widget standardTable = Container(padding: const EdgeInsets.all(20.0),child: Table(border: TableBorder.all(color: Colors.black,width: 1.0,style: BorderStyle.solid,borderRadius: const BorderRadius.all(Radius.circular(5.0))),children: [TableRow(decoration: const ShapeDecoration(color: Colors.green,shape: RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(5),topRight: Radius.circular(5),),),),children: [TableCell(child: Container(padding: const EdgeInsets.all(10.0),child: Center(child: Text('BMI值',style: getTextStyle(14.0, Colors.white, FontWeight.normal),),))),TableCell(child: Container(padding: const EdgeInsets.all(10.0),child: Center(child: Text('身体状况',style: getTextStyle(14.0, Colors.white, FontWeight.normal),),)))]),TableRow(children: [TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('<18.5',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('偏瘦',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),]),TableRow(children: [TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('18.5~23.9',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('正常',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),]),TableRow(children: [TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('24~27.9',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('偏胖',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),]),TableRow(children: [TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('>=28',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),TableCell(child: Container(padding: const EdgeInsets.all(7.0),child: Center(child: Text('肥胖',style: getTextStyle(12.0, Colors.grey, FontWeight.normal),),))),]),],),);

页面组合

然后将上面三个区域进行组合

return Container(child: Column(children: [topArea,const SizedBox(height: 10.0,),centerArea,const SizedBox(height: 40.0,),standardTable,],),);

BMI计算

BMI = 体重 / 身高的平方
身高标准体重 = 身高 - 105
每一个Text使用变量作为内容展示，然后修改其内容之后，使用setState进行值刷新

 ///BMI计算void BMICalculate(String sHeight,String sWeight){if(sHeight.isEmpty || sWeight.isEmpty){showFailedToast('身高或体重不能为空');return;}//bmi计算double dHeight = double.parse(sHeight) ;double dWeight = double.parse(sWeight);double bmiValue = dWeight / ((dHeight / 100)*(dHeight / 100));//身体状况计算String condition = "NaN";if(bmiValue < 18.5){condition = '偏瘦';}else if(bmiValue >= 18.5 && bmiValue < 23.9){condition = '正常';}else if(bmiValue >= 23.9 && bmiValue < 27.9){condition = '偏胖';}else{condition = '肥胖';}//标准体重计算 身高-105double standard = dHeight - 105;//刷新数据setState(() {///保留一位小数bmi = bmiValue.toStringAsFixed(1);body = 'body:$condition';standardWeight = '身高标准体重:${standard.toStringAsFixed(1)}';});print('【计算结果】:$bmi');}

Toast弹窗

效果

导入依赖

在pubspec.yaml文件中导入如下第三方包

fluttertoast: ^8.1.1

封装

Web和APP有一些地方不一样，例如背景颜色，web需要单独进行设立，如下所示

///web端的位置和背景颜色需要重新设置，如webPosition｜ webBgColorvoid showSuccessToast(String text) {Fluttertoast.showToast(msg: text,toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.TOP,backgroundColor: Colors.green,fontSize: 14.0,webPosition: 'center',webBgColor: 'linear-gradient(0deg,#37ecba 0%, #72afd3 100%)',);
}void showFailedToast(String text) {Fluttertoast.showToast(msg: text,toastLength: Toast.LENGTH_SHORT,gravity: ToastGravity.TOP,backgroundColor: Colors.red,fontSize: 14.0,webPosition: 'center',webBgColor: 'linear-gradient(0deg,#f43b47 0%, #453a94 100%)');}

Flutter for App——一个简单的BMI计算APP相关推荐

使用Flutter编写一个简单的天气查询App
使用Flutter编写一个简单的天气查询App Flutter项目目录分析入口函数 home:主页面编写天气应用网络请求数据解析布局编写 Flutter里基础的Widget 上中下 Fl ...
Flutter 实现一个简单的音视频App（一）
Flutter 实现一个简单的音视频App(一) 本文由动哒公众号(dongda_5g),QQ群(174353204)提供,欢迎关注获取技术支持,有任何问题群里都会回复. 在app中实现视频功能,是现 ...
熟悉安卓开发环境之 BMI计算App
菜鸡记录一下学习安卓时做过的小项目. 酱酱~!! 本次是BMI计算app,超级简单的app,随便写着玩的. BMI指数(即身体质量指数,简称体质指数又称体重,英文为Body Mass Index,简称 ...
Android——一个简单的记账本APP
一个简单的记账本APP 视频效果预览添加账目记录效果预览添加账目记录实现简述实现获取日期字符串时间戳转Date Date转星期获取时间 Switch控制显示和隐藏更改Switch样式 ...
Android入门之简单的BMI计算
Android入门之简单的BMI计算 UI效果图功能知识点 UI代码 Java主体部分效果图 UI效果图功能 1.输入体重身高,根据男女计算BMI值(用户密码是摆设,暂时不具备这个功能) 2. ...
如何制作一个简单的短视频 app
如果想制作一个简单的短视频 app,可以考虑以下步骤: 确定 app 的目标和功能:需要明确 app 的目标受众和提供的功能,以确定 app 的整体设计方向. 选择开发平台:根据自己的技术能力和预算选 ...
一个简单的智能停车APP——抽屉式侧边栏
一个简单的智能停车APP 功能介绍代码详解总结功能介绍先展示效果图: 侧边栏由MaterialDesign(原质化设计)框架设计而成. 由DrawerLayout+NavigationView ...
Flutter For App——一个简单的豆瓣APP
一个简单的豆瓣APP 效果视频功能简述功能第三方库接口简述底部导航栏效果图实现初始化BottomNavigationBarItem bottomNavigationBar 切换页面导致 ...
Android之简单的BMI计算器app
BMI计算器介绍身体质量指数(BMI,Body Mass Index)是国际上常用的衡量人体肥胖程度和是否健康的重要标准,主要用于统计分析.肥胖程度的判断不能采用体重的绝对值,它天然与身高有关. 这 ...

Flutter for App——一个简单的BMI计算APP