【Flutter】创建BMI计算器应用并添加依赖和打包

news2025/7/26 8:41:17

😏★,°:.☆( ̄▽ ̄)/$:.°★ 😏
这篇文章主要介绍创建BMI计算器应用并添加依赖和打包。
学其所用,用其所学。——梁启超
欢迎来到我的博客,一起学习,共同进步。
喜欢的朋友可以关注一下,下次更新不迷路🥞

文章目录

    • :smirk:1. BMI计算器示例
    • :blush:2. 添加依赖
    • :satisfied:3. 应用打包

😏1. BMI计算器示例

继续前面第一篇的,在显示时间的基础上增加BMI计算器,为了方便,各个功能分成单独dart文件实现,共3个文件。

main.dart

import 'package:flutter/material.dart';
import 'time_display.dart';
import 'bmi_calculator.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'frank_test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('frank_test'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: const [
            TimeDisplayScreen(),
            BMICalculator(),
          ],
        ),
      ),
    );
  }
}

time_display.dart

import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'dart:async';

class TimeDisplayScreen extends StatefulWidget {
  const TimeDisplayScreen({super.key});

  
  State<TimeDisplayScreen> createState() => _TimeDisplayScreenState();
}

class _TimeDisplayScreenState extends State<TimeDisplayScreen> {
  String _currentTime = '';
  late Timer _timer;

  
  void initState() {
    super.initState();
    _updateTime();
    _timer = Timer.periodic(const Duration(seconds: 1), (timer) {
      _updateTime();
    });
  }

  
  void dispose() {
    _timer.cancel();
    super.dispose();
  }

  void _updateTime() {
    setState(() {
      _currentTime = DateFormat('yyyy-MM-dd HH:mm:ss').format(DateTime.now());
    });
  }

  
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      margin: const EdgeInsets.all(16),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            const Text(
              '当前时间',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            Text(
              _currentTime,
              style: const TextStyle(fontSize: 24),
            ),
          ],
        ),
      ),
    );
  }
}

bmi_caculator.dart

import 'package:flutter/material.dart';

class BMICalculator extends StatefulWidget {
  const BMICalculator({super.key});

  
  State<BMICalculator> createState() => _BMICalculatorState();
}

class _BMICalculatorState extends State<BMICalculator> {
  final TextEditingController _heightController = TextEditingController();
  final TextEditingController _weightController = TextEditingController();
  double _bmiResult = 0;
  String _bmiCategory = '';

  void _calculateBMI() {
    final double height = double.tryParse(_heightController.text) ?? 0;
    final double weight = double.tryParse(_weightController.text) ?? 0;

    if (height > 0 && weight > 0) {
      setState(() {
        _bmiResult = weight / ((height / 100) * (height / 100));
        _updateBMICategory();
      });
    }
  }

  void _updateBMICategory() {
    if (_bmiResult < 18.5) {
      _bmiCategory = '偏瘦';
    } else if (_bmiResult < 24) {
      _bmiCategory = '正常';
    } else if (_bmiResult < 28) {
      _bmiCategory = '过重';
    } else {
      _bmiCategory = '肥胖';
    }
  }

  
  void dispose() {
    _heightController.dispose();
    _weightController.dispose();
    super.dispose();
  }

  
  Widget build(BuildContext context) {
    return Card(
      elevation: 4,
      margin: const EdgeInsets.all(16),
      child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            const Text(
              'BMI 计算器',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _heightController,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                labelText: '身高 (cm)',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            TextField(
              controller: _weightController,
              keyboardType: TextInputType.number,
              decoration: const InputDecoration(
                labelText: '体重 (kg)',
                border: OutlineInputBorder(),
              ),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: _calculateBMI,
              child: const Text('计算 BMI'),
            ),
            const SizedBox(height: 16),
            if (_bmiResult > 0)
              Column(
                children: [
                  Text(
                    'BMI: ${_bmiResult.toStringAsFixed(1)}',
                    style: const TextStyle(fontSize: 18),
                  ),
                  Text(
                    '状态: $_bmiCategory',
                    style: TextStyle(
                      fontSize: 18,
                      color: _getCategoryColor(),
                    ),
                  ),
                ],
              ),
          ],
        ),
      ),
    );
  }

  Color _getCategoryColor() {
    switch (_bmiCategory) {
      case '偏瘦':
        return Colors.blue;
      case '正常':
        return Colors.green;
      case '过重':
        return Colors.orange;
      case '肥胖':
        return Colors.red;
      default:
        return Colors.black;
    }
  }
}

😊2. 添加依赖

如果程序依赖一些库,比如这里依赖intl,需要在pubspec.yaml文件中添加:

dependencies:
  flutter:
    sdk: flutter
  intl: ^0.18.1

😆3. 应用打包

打包web:

flutter build web --release
# 运行
cd build/web
python3 -m http.server 8000

打包linux:

flutter build linux --release
./build/linux/x64/release/bundle/frank_test

请添加图片描述

以上。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2386368.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux 学习计划】-- 倒计时、进度条小程序

目录 \r 、\n、fflush 倒计时 进度条 进度条进阶版 结语 \r 、\n、fflush 首先我们先来认识这三个东西&#xff0c;这将会是我们接下来两个小程序的重点之一 首先是我们的老演员\n&#xff0c;也就是回车加换行 这里面其实包含了两个操作&#xff0c;一个叫做回车&…

微服务的应用案例

从“菜市场”到“智慧超市”&#xff1a;一场微服务的变革之旅 曾经&#xff0c;我们的系统像一个熙熙攘攘的传统菜市场。所有功能模块&#xff08;摊贩&#xff09;都挤在一个巨大的单体应用中。用户请求&#xff08;买菜的顾客&#xff09;一多&#xff0c;整个市场就拥堵不堪…

2025网络安全趋势报告 内容摘要

2025 年网络安全在技术、法规、行业等多个维度呈现新趋势。技术上&#xff0c;人工智能、隐私保护技术、区块链、量子安全技术等取得进展&#xff1b;法规方面&#xff0c;数据安全法规进一步细化&#xff1b;行业应用中&#xff0c;物联网、工业控制系统安全升级&#xff0c;供…

云原生安全基石:深度解析HTTPS协议(从原理到实战)

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念&#xff1a;HTTPS是什么&#xff1f; HTTPS&#xff08;HyperText Transfer Protocol Secure&#xff09;是HTTP协议的安全版本&#xff0c…

Autodl训练Faster-RCNN网络--自己的数据集(一)

参考文章&#xff1a; Autodl服务器中Faster-rcnn(jwyang)复现(一)_autodl faster rcnn-CSDN博客 Autodl服务器中Faster-rcnn(jwyang)训练自己数据集(二)_faster rcnn autodl-CSDN博客 食用指南&#xff1a;先跟着参考文章一进行操作&#xff0c;遇到问题再来看我这里有没有解…

python打卡day36

复习日 仔细回顾一下神经网络到目前的内容&#xff0c;没跟上进度的补一下进度 作业&#xff1a;对之前的信贷项目&#xff0c;利用神经网络训练下&#xff0c;尝试用到目前的知识点让代码更加规范和美观。探索性作业&#xff08;随意完成&#xff09;&#xff1a;尝试进入nn.M…

Paimon和Hive相集成

Flink版本1.17 Hive版本3.1.3 1、Paimon集成Hive 将paimon-hive-connector.jar复制到auxlib中&#xff0c;下载链接Index of /groups/snapshots/org/apache/https://repository.apache.org/snapshots/org/apache/paimon/ 通过flink进入查看paimon /opt/softwares/flink-1.…

HarmonyOS 鸿蒙应用开发进阶:深入理解鸿蒙跨设备互通机制

鸿蒙跨设备互通&#xff08;HarmonyOS Cross-Device Collaboration&#xff09;是鸿蒙系统分布式能力的重要体现&#xff0c;通过创新的分布式软总线技术&#xff0c;实现了设备间的高效互联与能力共享。本文将系统性地解析鸿蒙跨设备互通的技术架构、实现原理及开发实践。 跨设…

Vue.js教学第十五章:深入解析Webpack与Vue项目实战

Webpack 与 Vue 项目详解 在现代前端开发中,Webpack 作为最流行的模块打包工具之一,对于 Vue 项目的构建和优化起着至关重要的作用。本文将深入剖析 Webpack 的基本概念、在 Vue 项目中的应用场景,并详细讲解常用的 Webpack loaders 和 plugins 的配置与作用,同时通过实例…

Cmake编译gflags过程记录和在QT中测试

由于在QT中使用PaddleOCR2.8存在这样那样的问题&#xff0c;查找貌似是gflags相关问题导致的&#xff0c;因此从头开始按相关参考文章编译一遍gflags源码&#xff0c;测试结果表明Qt5.14.2中使用MSVC2017X64编译器运行的QTgflags项目是正常。 详细编译步骤如下&#xff1a; 1、…

项目中Warmup耗时高该如何操作处理

1&#xff09;项目中Warmup耗时高该如何操作处理 2&#xff09;如何在卸载资源后Untracked和Other的内存都回收 3&#xff09;总Triangles的值是否包含了通过GPU Instancing画的三角形 4&#xff09;有没有用Lua来修复虚幻引擎中对C代码进行插桩Hook的方案 这是第432篇UWA技术知…

制作一款打飞机游戏53:子弹样式

现在&#xff0c;我们有一个小程序可以发射子弹&#xff0c;但这些子弹并不完美&#xff0c;我们稍后会修复它们。 子弹模式与目标 在开始之前&#xff0c;我想修正一下&#xff0c;因为我观察到在其他射击游戏中有一个我想复制的简单行为。我们有静态射击、瞄准射击和快速射击…

Docker运维-5.3 配置私有仓库(Harbor)

1. harbor的介绍 Harbor(港湾)&#xff0c;是一个用于存储和分发 Docker 镜像的企业级 Registry 服务器。以前的镜像私有仓库采用官方的 Docker Registry&#xff0c;不便于管理镜像。 Harbor 是由 VMWare 在 Docker Registry 的基础之上进行了二次封装&#xff0c;加进去了很…

day 36

利用前面所学知识&#xff0c;对之前的信贷项目&#xff0c;利用神经网络训练 # 先运行之前预处理好的代码 import pandas as pd import pandas as pd #用于数据处理和分析&#xff0c;可处理表格数据。 import numpy as np #用于数值计算&#xff0c;提供了高效的数组…

mybatis-plus使用记录

MyBatis-Plus 学习笔记 一、 快速入门 MyBatis-Plus (MP) 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。 1. 引入 Maven 依赖 要使用 MyBatis-Plus&#xff0c;首先需要在项目的 pom.xml 文件中引入相…

Mcu_Bsdiff_Upgrade

系统架构 概述 MCU BSDiff 升级系统通过使用二进制差分技术&#xff0c;提供了一种在资源受限的微控制器上进行高效固件更新的机制。系统不传输和存储完整的固件映像&#xff0c;而是只处理固件版本之间的差异&#xff0c;从而显著缩小更新包并降低带宽要求。 该架构遵循一个…

有监督学习——决策树

任务 1、基于iris_data.csv数据&#xff0c;建立决策树模型&#xff0c;评估模型表现; 2、可视化决策树结构; 3、修改min_samples_leaf参数&#xff0c;对比模型结果 代码工具&#xff1a;jupyter notebook 参考资料 20.23 决策树&#xff08;1&#xff09;_哔哩哔哩_bil…

华为OD机试真题——启动多任务排序(2025B卷:200分)Java/python/JavaScript/C/C++/GO最佳实现

2025 B卷 200分 题型 本专栏内全部题目均提供Java、python、JavaScript、C、C++、GO六种语言的最佳实现方式; 并且每种语言均涵盖详细的问题分析、解题思路、代码实现、代码详解、3个测试用例以及综合分析; 本文收录于专栏:《2025华为OD真题目录+全流程解析+备考攻略+经验分…

大模型时代,Python 近红外光谱与 Transformer 模型:学习的必要性探究

在当下大语言模型盛行的时代&#xff0c;各类新技术如潮水般不断涌现&#xff0c;让人应接不暇。身处这样的浪潮之中&#xff0c;不少人心中都会泛起疑问&#xff1a;Python 近红外光谱和 Transformer 模型还有学习的必要性吗&#xff1f;今天&#xff0c;就让我们深入探讨一番…

梯度优化提示词:精准引导AI分类

基于梯度优化的提示词工程方法,通过迭代调整提示词的嵌入向量,使其能够更有效地引导模型做出正确分类。 数据形式 训练数据 train_data 是一个列表,每个元素是一个字典,包含两个键: text: 需要分类的文本描述label: 对应的标签(“冲动"或"理性”)示例数据: …