1、Flutter移动端App实战教程【环境配置、模拟器配置】

一、概述

Flutter是Google用以帮助开发者在IOS和Android
两个平台开发高质量原生UI的移动SDK,一份代码可以同时生成IOS和Android两个高性能、高保真的应用程序。

二、渲染机制

之所以说Flutter能够达到可以媲美甚至超越原生的体验,主要在于其拥有高性能的图形渲染能力,首先对比下Flutter和原生Android及其他跨平台框架(如RN)的渲染机制,如下图:
img

  • Android原生App在绘图的时候,首先调用Android Framework的java代码,然后调用Skia(c/++)绘图引擎, 最终生成CPU/GPU指令在设备完成渲染;
  • Flutter在绘图的时候,首页调用Flutter Framework的Dart代码,然后直接调用Skia(c/++)绘图引擎, 最终生成CPU/GPU指令在设备渲染;
  • 其他跨平台框架(如RN)首先调用其框架的javaScript代码,然后调用Android Framework的java代码,比原生的多了一层,显然RN肯定不如原生。

由此可见,Flutter和Android原生,只要Flutter Framework的Dart代码的效率可以媲美Android Framework的java代码,就可以理解为Flutter app达到媲美原生的性能体验。

另外Flutter使用的Skia渲染引擎,是Flutter sdk的一部分,会随着Flutter sdk升级而升级,而原生的skia渲染引擎则需要跟随Android操作系统的升级而得以升级,因此对于skia引擎的性能提升,会更及时的影响到Flutter App上。

三、环境配置

  1. 下载Flutter SDK

  2. 更新环境变量,添加FLUTTRE_HOME变量,值为flutter安装包所处的位置,并在PATH中添加%FLUTTER_HOME%\bin

  3. 运行fluuter doctor,检测尚未安装的软件,打【X】的表示需要安装。

  4. 安装 Android Studio,安装过程中会自动安装Android SDK。(步骤7也是在此IDE中完成)

  5. 打开file>settings,安装DartFlutter插件
    在这里插入图片描述
    在这里插入图片描述

  6. 进入命令行执照授权: flutter doctor --android-licenses

  7. 打开file>settings,进入Android SDK,安装cmmmand-line tools

    img

  8. 修改源,添加以下两个环境变量

    PUB_HOSTED_URL = https://pub.flutter-io.cn
    FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
    
  9. 添加SDK环境变量

//新增系统变量
ANDROID_HOME=C:\Users\SC9535\AppData\Local\Android\Sdk//新增Path
%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\cmdline-tools
%ANDROID_HOME%\emulator

完成上述所有配置后,再次执行flutter doctor,显示如下:

image-20230903211803928

除了Visual Studio这个IDE没有安装,因为暂时不需要开发Window桌面程序,其他都已经安装成功。

四、安装模拟器

1、步骤

打开Android Studio右侧DeviceMachine ,点击Create Device创建模拟器。

image-20230903212833357

选择镜像时,建议选择x86。(未安装hamx的,界面上会出现标红的安装提示,进入安装即可)

image-20230903213048922

点击【Finish】

image-20230903213231408

image-20230903213543978

2、运行

点击上面调试按钮image-20230903213909524,启动完成后出现下面的模拟器窗口。

image-20230903213822575

到这里,基础的环境和模拟器配置就都完成了。

五、其他运行模拟器的方式

1、VS Code运行模拟器

Android Studio中创建完模拟器后,如果我们改用VS code做开发,也可以用vs code运行模拟器。

首先在VS code右下角启动模拟器;

image-20230904203201087

如上选择我们在Android Studio中创建的模拟器:Nexus 5 API 30-Test。选中启动后,会出现一个没有打开任何应用的初始模拟器。

image-20230904203430684

最后我们打开terminal命令行,运行flutter run命令,模拟器用会自动运行当前App,如下图:

image-20230904203654987

2、命令行运行模拟器

首先需要确保环境变量中含有 ANDROID_HOME 变量

  1. 查询本机有哪些模拟机可以选,使用下面的命令查询:
%ANDROID_HOME%\emulator\emulator.exe -list-avds

image-20230904213132850

  1. 启动指定的模拟器,下面是启用的Nexus_5_API_30-Test
%ANDROID_HOME%\emulator\emulator.exe -netdelay none -netspeed full -avd Nexus_5_API_30-Test

然后模拟就会开始运行。

六、常见问题

1、Android Emulator Unauthorized

方法一:
抹除模拟器数据
在这里插入图片描述
方法二:

  1. Exit all emulators
  2. Delete ~/.android/adbkey and ~/.android/adbkey.pub
  3. adb kill-server
  4. adb devices Wipe data of AVD
  5. Relaunch emulator

Android Emulator Unauthorized


推荐阅读:
理解Flutter UI系统
Flutter在Windows平台下的安装配置

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

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

相关文章

GeoNet: Unsupervised Learning of Dense Depth, Optical Flow and Camera Pose 论文阅读

论文信息 题目:GeoNet: Unsupervised Learning of Dense Depth, Optical Flow and Camera Pose 作者:Zhichao Yin and Jianping Shi 来源:CVPR 时间:2018 Abstract 我们提出了 GeoNet,这是一种联合无监督学习框架&a…

WebGIS外包开发流程

WebGIS开发流程需要综合考虑前端和后端开发、地理信息数据处理、用户需求和安全性等多个方面。成功的WebGIS应用程序需要不断地进行更新和维护,以适应变化的需求和技术。WebGIS开发是一个复杂的过程,通常包括以下主要步骤。北京木奇移动技术有限公司&…

【 XXL-JOB】 XXL-JOB任务分片

文章目录 前言xxl-job 分片广播任务的详细教程创建任务编写任务代码分片参数设置执行任务查看任务执行结果示例1示例2 总结 前言 xxl-job 是一个分布式任务调度平台,支持定时任务和分片任务。其中,分片任务可以将一个大任务拆分成多个小任务&#xff0c…

【CSDN技术】Markdown编辑器如何使用-csdn博客编写入门

Markdown编辑器如何使用-csdn博客编写入门 欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants 创建一个自…

概率有向图模型(一)

文章目录 前言概率有向图模型验证回到书中隐马尔可夫模型信念网络朴素贝耶斯 总结 前言 经过前面的复习,我们把李航老师的《统计学习方法》中的监督学习部分回顾了一遍,接下来我们在此基础上,开始学习邱锡鹏老师的《神经网络与深度学习》&am…

socket的使用 | TCP/IP协议下服务器与客户端之间传送数据

服务器端代码: import java.io.*; import java.net.ServerSocket; import java.net.Socket;public class theServer {public static void main(String[] args) throws IOException {ServerSocket serverSocket new ServerSocket(9999); // 该行代码作用&#xff1…

Android签名查看

查看签名文件信息 第一种方法: 1.打开cmd,执行keytool -list -v -keystore xxx.keystore,效果如下图: 第二种方法: 1.打开cmd,执行 keytool -list -v -keystore xxxx.keystore -storepass 签名文件密码&#xff0…

suning苏宁API接入说明(苏宁商品详情+关键词搜索商品列表)

API地址:https://o0b.cn/anzexi 调用示例:https://api-gw.onebound.cn/suning/item_get/?keytest_api_key& &num_iid0070134261/703410301&&langzh-CN&secret 参数说明 通用参数说明 version:API版本key:调用key,测试key:test_api_keyapi_na…

2023高教社杯数学建模C题思路模型 - 蔬菜类商品的自动定价与补货决策

# 1 赛题 在生鲜商超中,一般蔬菜类商品的保鲜期都比较短,且品相随销售时间的增加而变差, 大部分品种如当日未售出,隔日就无法再售。因此, 商超通常会根据各商品的历史销售和需 求情况每天进行补货。 由于商超销售的蔬菜…

Vue+Element-ui+SpringBoot搭建后端汽车租赁管理系统

最近在做项目,花了一周的时间搭建了一个十分完备的汽车租赁后端管理系统。页面采用纯Vue2Element-ui搭建,后端采用SpringbootMybatis搭建,数据库采用Mysql。包括了登录验证,根据不同权限进入不同界面、数据增删改查、表格分页、表…

多波束测线问题

多波束测线问题 问题的背景是海洋测深技术,特别是涉及单波束测深和多波束测深系统。这些系统利用声波传播原理来测量水体深度。 单波束测深系统通过向海底发射声波信号并记录其返回时间来测量水深。该系统的特点是每次只有一个波束打到海底,因此数据分布…

unity 场景烘培(边学习,边记录)

前言:好记性不如烂笔头,本文只提供参考! 问题总结:1.unity 场景烘焙问题之模型UV有重叠_野区捕龙为宠的博客-CSDN博客 一、光源种类(摘录:Unity灯光(light)_浮影℡的博客-CSDN博客…

CMS 三色标记【JVM调优】

文章目录 1. 垃圾回收器2. CMS 原理3. 三色标记算法 1. 垃圾回收器 ① Serial:最原始的垃圾回收器,用于新生代,是单线程的,GC 时需要停止其它所有的工作,算法简单,但它只能在内存较小时勉强使用&#xff1b…

【Maven教程】(五)仓库:解析Maven仓库—布局、分类和配置,远程仓库的认证与部署,快照版本,依赖解析机制,镜像和搜索服务 ~

Maven 仓库 1️⃣ 什么是Maven仓库2️⃣ 仓库的布局3️⃣ 仓库的分类3.1 本地仓库3.2 远程仓库3.3 中央仓库3.4 私服 4️⃣ 远程仓库的配置4.1 远程仓库的认证4.2 部署至远程仓库 5️⃣ 快照版本6️⃣ 从仓库解析依赖的机制7️⃣ 镜像8️⃣ 仓库搜索服务8.1 Sonatype Nexus8.2…

智能小车之跟随小车、避障小车原理和代码

目录 1. 红外壁障模块分析​编辑 2. 跟随小车的原理 3. 跟随小车开发和调试代码 4. 超声波模块介绍 5. 摇头测距小车开发和调试代码 1. 红外壁障模块分析 原理和循迹是一样的,循迹红外观朝下,跟随朝前 TCRT5000传感器的红外发射二极管不断发射红外…

2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测数据分析详解+思路+Python代码

2023 年高教社杯全国大学生数学建模竞赛-E 题 黄河水沙监测数据分析 十分激动啊啊啊题目终于出来了!!官网6点就进去了结果直接卡死现在才拿到题目,我是打算A-E题全部做一遍。简单介绍一下我自己:博主专注建模四年,参与…

golang-bufio 缓冲写

1. 缓冲写 在阅读这篇博客之前,请先阅读上一篇:golang-bufio 缓冲读 // buffered output// Writer implements buffering for an io.Writer object. // If an error occurs writing to a Writer, no more data will be // accepted and all subsequent…

《protobuf》入门

protobuf 初始protobuf简单上手编写protobuf编译 .proto 文件编写测试文件 testPB.cc 初始protobuf Protocol Buffers 是 Google 的一种语言无关、平台无关、可扩展的序列化结构数据的 方法,它可用于(数据) 通信协议、数据存储等。 Protocol …

【autodesk】浏览器中渲染rvt模型

使用Forge完成渲染 Forge是什么 为什么能够渲染出来rvt模型 Forge是由Autodesk开发的一套云端开发平台和工具集。在Forge平台中,有一个名为"Model Derivative"的服务,它可以将包括RVT(Revit)在内的多种BIM&#xff08…

【2023高教社杯】D题 圈养湖羊的空间利用率 问题分析、数学模型及MATLAB代码

【2023高教社杯】D题 圈养湖羊的空间利用率 问题分析、数学模型及MATLAB代码 1 题目 题目 D 题 圈养湖羊的空间利用率 规模化的圈养养殖场通常根据牲畜的性别和生长阶段分群饲养,适应不同种类、不同阶段的牲畜对空间的不同要求,以保障牲畜安全和健康&a…