Flutter环境搭建

1.Flutter 简介

1.1 Flutter 是什么 ?
  • Flutter 是一个 UI SDK(Software Development Kit)
  • 跨平台解决方案:可以实现一套代码发布移动端(iOS、Android、HarmonyOS)、Web端、桌面端
  • 目前很多公司都在用它,比如:Google、阿里、字节、腾讯、小米,尤其是阿里的咸鱼团队,为 Flutter 的生态做出了很多贡献 https://space.bilibili.com/344928717
  • Flutter 有着统一大前端的野望,并且它在不断蚕食 iOS、Android、HarmonyOS 这些原生开发
1.2 Flutter的几个特点:

美观、快速、高效、开放

  • 美观
    使用Flutter内置美丽的Material Design和Cupertino widget、丰富的motion API、平滑而自然的滑动效果和平台感知,为您的用户带来全新体验。
  • 快速
    Flutter 的 UI 渲染性能很好。在生产环境下,Flutter 将代码编译成机器码执行,并充分利用 GPU 的图形加速能力,因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。
    Flutter 引擎使用 C++ 编写,包括高效的 Skia 2D 渲染引擎,Dart 运行时和文本渲染库。
  • 高效
    Hot Reload (热重载),在前端已经不是什么新鲜的东西,但在移动端之前一直是没有的
  • 开放
    Flutter 是开放的,它是一个完全开源的框架。

2.Flutter开发环境搭建

2.1 Mac搭建 Flutter 开发环境

参考文档:https://flutter.cn/docs/get-started/install/macos
安装flutter

  • 下载:https://docs.flutter.cn/get-started/install/macos/mobile-ios#install-the-flutter-sdk
  • 选择自己的操作系统和最新稳定的版本(Stable版本)
  • 创建一个可以安装 Flutter 的文件夹,文件夹名称随意,我这边命名为 flutter_dev, 将下载好的sdk拖入flutter_dev中
    在这里插入图片描述
  • 配置Flutter的环境变量
    因为我们之后需要在命令行执行Flutter的命令,所以需要配置环境变量
    macOS或者Linux系统,需要编辑~/.bash_profile文件 或者 ~/.zshenv 文件
export PATH=/Users/RobinLee/flutter_dev/flutter/bin:$PATH

创建 /.zshrc文件 ,编辑

source ~/.bash_profile

在终端中运行source ~/.zshrc命令,‌使新的环境变量设置立即生效。
在终端中执行flutter --version,出现如下内容,说明安装flutter成功
在这里插入图片描述

  • 配置镜像
    flutter项目会依赖一些东西,在国内下载这些依赖会有一些慢,所以我们可以将它们的安装源换成国内的(也就是设置国内的镜像)
    macOS或者Linux操作系统,依然是编辑~/.bash_profile文件
#flutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
2.2 Windows搭建 Flutter 开发环境
  • 参考文档:https://flutter.cn/docs/get-started/install/windows
  • 下载:https://docs.flutter.cn/get-started/install/windows/mobile#install-the-flutter-sdk
  • 选择自己的操作系统和最新稳定的版本(Stable版本)
    安装Flutter
  • 解压下载好的 Flutter SDK
  • 这个在 Windows 和 macOS 都是一样的(选择一个自己想要安装的目录)
    在这里插入图片描述
  • 配置 Flutter 的环境变量
    • Windows 环境变量修改:点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
    • 找到 Path,在其中添加 Flutter SDK目录下bin目录

在这里插入图片描述

  • 在终端中执行 flutter --version,出现如下内容,说明安装flutter成功
    在这里插入图片描述
2.3 配置 ios环境

如果想为Flutter配置iOS开发环境,需要在我们的电脑上安装一个Xcode(此部分Windows电脑忽略)
Xcode是苹果公司的iOS和macOS的IDE,进行过iOS开发的童鞋应该都非常熟悉
如何安装Xcode呢? 常见的是两种

  • 直接在App Store上搜索Xcode,找到安装即可
    这种安装方式有一个缺点,安装的一定是最新版本的(当然是用最新版本的最好)
    但是最新版本的Xcode会对macOS系统有一定的要求,所以可能还要设计到系统升级
    如果不希望系统升级,可以选择第二种方式
  • 第二种方式是安装自己想要的Xcode的版本,需要手动去下载
    进入https://developer.apple.com/download/more[2]页面
    登录自己的Apple ID
    在搜索框输入Xcode,回车搜索,找到各种版本Xcode下载即可
    打开Xcode,右上角点击Xcode - Open Developer Tools - Simulator,这个时候会打开一个默认的iOS模拟器
    在这里插入图片描述
    方式二 打开Xcode,右上角点击Xcode - Settings
    在这里插入图片描述
    运行 Flutter doctor 来验证安装。
flutter doctor -v
2.4 配置Android环境

如果想为Flutter配置Android开发环境,需要在我们的电脑上安装一个Android Studio
Android Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。

  • Android Studio的下载
    下载地址:https://developer.android.google.cn/studio?hl=zh-cn
    下载完成直接双击安装即可
    在这里插入图片描述
    将Android Studio拖到应用程序,双击打开,会自动下载,选定android sdk目录
    由于自定义了Android-SDK的安装目录, 所以在运行flutter doctor命令之前,用flutter Config命令手动配置一下Android SDK的安装目录。
flutter config --android-sdk /Users/RobinLee/androidsdk

运行flutter doctor命令之前, 还需要安装cmdline-tools
在这里插入图片描述
执行一下同意Android协议命令,会出现很多协议问询对话,都输y。

flutter doctor --android-licenses

安装配置完Android Studio之后运行flutter doctor,重新检查平台依赖安装情况, 可以看到,一切都OK了。
在这里插入图片描述
点击Plugins开始安装Dart和Flutter插件:
在这里插入图片描述
重启之后, 你会发现出现一个New Flutter Project的菜单图标,现在flutter的开发环境已经配置好了,接下来我们创建自己的第一个flutter项目。
在这里插入图片描述
创建flutter项目
在这里插入图片描述
点击创建之后,项目就创建好了。想看flutter项目运行效果,还得安装手机模拟器。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
启动模拟器运行flutter项目
在这里插入图片描述

2.5 配置鸿蒙环境

能够开发构建 HarmonyOS 应用,需要 DevEco Studio 和模拟器。
下载中心 | 华为开发者联盟-HarmonyOS开发者官网
https://developer.huawei.com/consumer/cn/download/all
[鸿蒙版Flutter环境搭建指导]
鸿蒙版Flutter: https://gitee.com/openharmony-sig/flutter_flutter

下载针对OpenHarmony的Flutter版本 拖到 flutter_dev目录下
或者直接clone代码地址

git clone -b dev git@gitee.com:openharmony-sig/flutter_flutter.git

配置环境变量

 # 国内镜像export PUB_HOSTED_URL=https://pub.flutter-io.cnexport FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn# 拉取下来的flutter_flutter/bin目录export PATH=/home/<user>/ohos/flutter_flutter/bin:$PATH# HamonyOS SDKexport TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac环境export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdkexport PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/binexport PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/binexport PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin# windows环境TOOL_HOME = D:\devecostudio-windows\DevEco StudioDEVECO_SDK_HOME=%TOOL_HOME%\sdkPATH=%TOOL_HOME%\tools\ohpm\binPATH=%TOOL_HOME%\tools\hvigor\binPATH=%TOOL_HOME%\tools\node

这是我的mac上配置的环境变量
在这里插入图片描述
运行 flutter doctor -v 检查环境变量配置是否正确,Futter与OpenHarmony应都为ok标识
在这里插入图片描述

创建工程

 # 创建工程flutter create --platforms ohos <projectName>

编译hap包,编译产物在/ohos/entry/build/default/outputs/default/entry-default-signed.hap下。

 # 进入工程根目录编译# 示例:flutter build hap [--target-platform ohos-arm64] --releaseflutter build hap --release

安装应用,通过flutter devices指令发现真机设备之后,然后安装到鸿蒙手机中。
方式一:进入编译产物目录,然后安装到鸿蒙手机中

hdc -t <deviceId> install <hap file path>

方式二:进入项目目录,直接运行安装到鸿蒙手机中

flutter run --debug -d <deviceId>

构建app包命令:

 # 示例:flutter build app --releaseflutter build app --release

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

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

相关文章

安全算法基础(一)

安全算法是算法的分支之一&#xff0c;还的依靠大量的数学基础进行计算&#xff0c;本文参照兜哥的AI安全样本对抗&#xff0c;做一个简单的算法安全概括&#xff0c;从零学习。 最新的安全算法对于我们常规的攻击样本检测&#xff0c;效果是不理想的&#xff0c;为了探究其原…

单元测试-Unittest框架实践

文章目录 1.Unittest简介1.1 自动化测试用例编写步骤1.2 相关概念1.3 用例编写规则1.4 断言方法 2.示例2.1 业务代码2.2 编写测试用例2.3 生成报告2.3.1 方法12.3.2 方法2 1.Unittest简介 Unittest是Python自带的单元测试框架&#xff0c;适用于&#xff1a;单元测试、Web自动…

QtCreator配置github copilot实现AI辅助编程

文章目录 1、概述2、配置环境3、演示 1、概述 新时代的浪潮早就已经来临&#xff0c;上不了船的人终将被抛弃&#xff0c;合理使用AI辅助开发、提升效率是大趋势&#xff0c;注意也不要过于依赖。 2024年12月18日&#xff0c;GitHub 官方宣布了一个激动人心的重大消息&#xf…

数字经济下的 AR 眼镜

目录 1. &#x1f4c2; AR 眼镜发展历史 1.1 AR 眼镜相关概念 1.2 市面主流 XR 眼镜 1.3 AR 眼镜大事记 1.4 国内外 XR 眼镜 1.5 国内 AR 眼镜四小龙 2. &#x1f531; 关键技术 2.1 AR 眼镜近眼显示原理 2.2 AR 眼镜关键技术 2.3 AR 眼镜技术难点 3. &#x1f4a…

LabVIEW深海气密采水器测控系统

LabVIEW的深海气密采水器测控系统通过高性价比的硬件选择与自主开发的软件&#xff0c;实现了高精度的温度、盐度和深度测量&#xff0c;并在实际海上试验中得到了有效验证。 项目背景 深海气密采水器是进行海底科学研究的关键工具&#xff0c;用LabVIEW开发了一套测控系统&am…

RocketMQ的集群架构是怎样的?

大家好&#xff0c;我是锋哥。今天分享关于【RocketMQ的集群架构是怎样的?】面试题。希望对大家有帮助&#xff1b; RocketMQ的集群架构是怎样的? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 RocketMQ 是阿里巴巴开源的分布式消息中间件&#xff0c;广泛用于处…

【Rust自学】4.5. 切片(Slice)

4.5.0. 写在正文之前 这是第四章的最后一篇文章了&#xff0c;在这里也顺便对这章做一个总结&#xff1a; 所有权、借用和切片的概念确保 Rust 程序在编译时的内存安全。 Rust语言让程序员能够以与其他系统编程语言相同的方式控制内存使用情况&#xff0c;但是当数据所有者超…

AI的进阶之路:从机器学习到深度学习的演变(一)

AI的进阶之路&#xff1a;从机器学习到深度学习的演变 在当今科技迅猛发展的时代&#xff0c;人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&#xff09;和深度学习&#xff08;DL&#xff09;已成为推动创新的核心力量。这三个领域虽然紧密相连&#xff0c;却…

《算法》题目

多项选择题 2023年2月,美国国家标准与技术研究院(NIST)将 Ascon算法确立为轻量级加密(LWC)标准,关于该算法和标准的说法,正确的是( )。 A.该标准属于国际标准 B.该标准旨在保护物联网(IoT)创建和传输的信息 C.通过法律法规规范标准化机构的职责与权限,可以起到推动技…

Git配置公钥步骤

GIt公钥的配置去除了git push输入账号密码的过程&#xff0c;简化了push流程。 1.生成SSH公钥和私钥 ssh-keygen -t rsa -b 4096 -C “your_emailexample.com” 遇到的所有选项都按回车按默认处理。获得的公钥私钥路径如下&#xff1a; 公钥路径 : ~/.ssh/id_rsa.pub 私钥路径…

Mysql的多表查询及表的连接

Mysql的多表查询及表连接 目录 Mysql的多表查询及表连接连接查询条件有关联的表的连接natural joinusingon等值连接非等值连接 表与表的外连接左外连接右外连接 表的自连接表的子连接表的伪表查询 连接查询条件 查询的两张表如果出现同名的列&#xff0c;我们需要将表名标注到列…

移动魔百盒中的 OpenWrt作为旁路由 安装Tailscale并配置子网路由实现在外面通过家里的局域网ip访问内网设备

移动魔百盒中的 OpenWrt作为旁路由 安装Tailscale并配置子网路由实现在外面通过家里的局域网ip访问内网设备 一、前提条件 确保路由器硬件支持&#xff1a; OpenWrt 路由器需要足够的存储空间和 CPU 性能来运行 Tailscale。确保设备架构支持 Tailscale 二进制文件&#xff0c;例…

每天40分玩转Django:Django部署

Django部署 一、今日学习内容概述 学习模块重要程度主要内容生产环境配置⭐⭐⭐⭐⭐settings配置、环境变量WSGI服务器⭐⭐⭐⭐⭐Gunicorn配置、性能优化Nginx配置⭐⭐⭐⭐反向代理、静态文件安全设置⭐⭐⭐⭐⭐SSL证书、安全选项 二、生产环境配置 2.1 项目结构调整 mypr…

CVPR2024 | 通过集成渐近正态分布学习实现强可迁移对抗攻击

Strong Transferable Adversarial Attacks via Ensembled Asymptotically Normal Distribution Learning 摘要-Abstract引言-Introduction相关工作及前期准备-Related Work and Preliminaries1. 黑盒对抗攻击2. SGD的渐近正态性 提出的方法-Proposed Method随机 BIM 的渐近正态…

华为IPD流程6大阶段370个流程活动详解_第一阶段:概念阶段 — 81个活动

华为IPD流程涵盖了产品从概念到上市的完整过程,各阶段活动明确且相互衔接。在概念启动阶段,产品经理和项目经理分析可行性,PAC评审后成立PDT。概念阶段则包括产品描述、市场定位、投资期望等内容的确定,同时组建PDT核心组并准备项目环境。团队培训涵盖团队建设、流程、业务…

《LangChain大模型应用开发》书籍分享

前言 ChatGPT和OpenAI开发的GPT模型不仅改变了我们的写作和研究方式&#xff0c;还改变了我们处理信息的方式。《LangChain大模型应用开发》讨论了聊天模式下的LLM的运作、能力和局限性&#xff0c;包括ChatGPT和Gemini。书中通过一系列实际例子演示了如何使用LangChain框架构…

Win10将WindowsTerminal设置默认终端并添加到右键(无法使用微软商店)

由于公司内网限制&#xff0c;无法通过微软商店安装 Windows Terminal&#xff0c;本指南提供手动安装和配置新版 Windows Terminal 的步骤&#xff0c;并添加右键菜单快捷方式。 1. 下载新版终端安装包: 访问 Windows Terminal 的 GitHub 发布页面&#xff1a;https://githu…

Oracle中间件 SOA之 OSB 12C服务器环境搭建

环境信息 服务器基本信息 如下表&#xff0c;本次安装总共使用1台服务器&#xff0c;具体信息如下&#xff1a; App1服务器 归类 APP服务器 Ip Address 172.xx.30.xx HostName appdev01. xxxxx.com Alias appdev01 OSB1服务器 归类 OSB服务器 Ip Address 172.xx3…

java小知识点:比较器

java中自主排序主要根据一个Comparator类来实现。 他内部实现用的是Timsort策略。大概思想是说将整个集合分成几个小段&#xff0c;每个小段分别排序&#xff0c;然后再拼在一起。 主要用法是传入两个数&#xff08;也可以不是Integer或int类型&#xff0c;这里只是把他们都统称…

红米Note 9 Pro5G刷小米官方系统

前言 刷机有2种方式&#xff1a;线刷 和 卡刷。 线刷 线刷&#xff1a;需要用电脑刷机工具&#xff0c;例如&#xff1a;XiaoMiFlash.exe&#xff0c;通过电脑和数据线对设备进行刷机。 适用场景&#xff1a; 系统损坏无法开机。恢复官方出厂固件。刷机失败导致软砖、硬砖的…