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

news2024/11/14 20:47:56

一、概述

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.coloradmin.cn/o/986174.html

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

相关文章

相似性搜索,第 4 部分:分层可导航小世界 (HNSW)

一、说明 SImilarity 搜索是一个问题,给定一个查询的目标是在所有数据库文档中找到与其最相似的文档。相似度搜索(similarity search)是指在大规模数据集中寻找与某个查询对象最相似的对象的过程。该过程通常涉及计算两个对象之间的相似度得分…

软件设计师学习笔记9-进程调度

目录 1. PV操作 1.1进程的同步与互斥 1.1.1互斥 1.1.2同步 1.2 PV操作 1.2.1信号量 1.2.2 PV操作的概念 2.信号量与PV操作 2.1 PV操作与互斥模型 2.2 PV操作与同步模型 2.3 互斥与同步模型结合 3.前趋图与PV操作 1. PV操作 1.1进程的同步与互斥 1.1.1互斥 互斥&…

Car Window Control Reset

大众汽车窗口自动升降失效,重置: 扣住5秒,重启汽车,试一下车钥匙,和再重试这个按钮,扣一下试一试

使用openWRT 配置SFTP 实现远程文件安全传输

文章目录 前言 1. openssh-sftp-server 安装2. 安装cpolar工具3.配置SFTP远程访问4.固定远程连接地址 前言 本次教程我们将在OpenWRT上安装SFTP服务,并结合cpolar内网穿透,创建安全隧道映射22端口,实现在公网环境下远程OpenWRT SFTP&#xf…

nginx空字节漏洞复现

将nginx复制到C盘根目录 cmd运行startup.bat 安装完成后访问 输入info.php 输入info.png 抓包使用00截断 可以看到phpinfo成功执行 在PHP的底层C语言里,%00代表着字符串结束,00截断可以用来绕过后端验证,后端验证的时候因为00截断认为文件是…

【已更新代码图表】2023数学建模国赛E题python代码--黄河水沙监测数据分析

E 题 黄河水沙监测数据分析 黄河是中华民族的母亲河。研究黄河水沙通量的变化规律对沿黄流域的环境治理、气候变 化和人民生活的影响,以及对优化黄河流域水资源分配、协调人地关系、调水调沙、防洪减灾 等方面都具有重要的理论指导意义。 附件 1 给出了位于小浪底水…

postgresql-使用plpgsql批量插入用户测试数据

目的 使用plpgsql批量插入用户测试数据 ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤我是分割线❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤ 我的环境 客户端:windows 版pgadmin4 服务端:linux版PostgreSQL 15.4 ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤…

Spring整合tomcat的WebSocket详细逻辑(图解)

主要解决存在的疑问 为什么存在2种spring整合websocket的方式,一种是使用ServerEndpoint注解的方式,一种是使用EnableWebSocket注解的方式,这2种有什么区别和联系?可以共存吗?它们实现的原理是什么?它们的各…

数据接口工程对接BI可视化大屏(二)创建BI空间

第2章 创建BI空间 2.1 SugarBI介绍 网站地址:https://cloud.baidu.com/product/sugar.html SugarBI是百度推出的自助BI报表分析和制作可视化数据大屏的强大工具。 基于百度Echarts提供丰富的图表组件,开箱即用、零代码操作、无需SQL,5分钟即可完成数…

C#__线程的优先级和状态控制

线程的优先级: 一个CPU同一时刻只能做一件事情,哪个线程优先级高哪个先运行,优先级相同看调度算法。 在Thread类中的Priority属性(Highest,Above,Normal,BelowNormal,Lowest)可以影响线程的优先级 关于…

PHP反序列化漏洞

一、序列化,反序列化 序列化:将php对象压缩并按照一定格式转换成字符串过程反序列化:从字符串转换回php对象的过程目的:为了方便php对象的传输和存储 seriallize() 传入参数为php对象,序列化成字符串 unseriali…

HTTP代理如何设置

HTTP代理是一种非常重要的网络工具,它可以帮助我们在访问互联网时提高访问速度,保护用户隐私等等。在使用HTTP代理时,需要先进行设置。下面就来介绍一下HTTP代理如何设置。 一、了解HTTP代理 在开始设置HTTP代理之前,我们需要先了…

系统架构技能之设计模式-组合模式

一、上篇回顾 我们上篇主要讲述了结构型模式中的外观模式,外观模式作为结构型模式中的一个简单又实用的模式,外观模式通过封装细节来提供大粒度的调用, 直接的好处就是,封装细节,提供了应用写程序的可维护性和易用性。…

Es6中的拓展运算符参数解构在实际项目当中应用

扩展操作符 … 是ES6中引入的,将可迭代对象展开到其单独的元素中,常见的应用场景有:拷贝数组对象,合并数组,参数传递,数组去重,字符串转字符数组,解构变量等 单纯的学习某个技术知识点,很容易的,但是能在实际项目中运用进去,那就不简单了的 单纯的学习某个语言的语法…

国家矿山安全监察局关于露天矿山边坡监测系统建设及预警响应要求

矿山是人类社会发展的物资基础,也是国民经济的重要组成部分。随着我国经济的快速增长,矿山开发步伐加快,使得边坡问题日益严重,影响了矿山的安全生产。为有效防范遏制矿山重特大事故发生,国家矿山安全监察局在8月30日发…

Laravel系列开源Dcat admin礼盒商城后台管理项目

前言: 在最近能在与某位前段大佬,合作开发一款项目,这宽项目是由laravel框架搭建使用的Dcat admin框架所制作的一个后台的管理系统,前段制作的是一款小程序,虽说后台管理系统无论是前段还是后端都是千篇一律,但内容也是非常丰富。但本项目仅作为开源学习和技术交流&#xff0c…

爬虫数据清洗可视化实战-就业形势分析

基于采集和分析招聘网站的数据的芜湖就业形势的调查研究 一、引言 本报告旨在分析基于大数据的当地就业形势,并提供有关薪资、工作地点、经验要求、学历要求、公司行业、公司福利以及公司类型及规模的详细信息。该分析是通过网络爬虫技术对招聘网站的数据进行采集…

校园二手物品交易系统微信小程序设计

系统简介 本网最大的特点就功能全面,结构简单,角色功能明确。其不同角色实现以下基本功能。 服务端 后台首页:可以直接跳转到后台首页。 用户信息管理:管理所有申请通过的用户。 商品信息管理:管理校园二手物品中…

蓝牙服务功能

前言 这阵子用到蓝牙比较多,想写一个专栏专门讲解蓝牙协议及其应用,本篇是第二篇文章,讲解蓝牙服务。 参考网上各大神文章,及瑞萨的文章,参考GPT,并且加入了一些本人的理解。 图片部分源自网络&#xff…

树形控件加自定义图标样式及指引线

记录一下留用&#xff0c;有错误请指正。 效果图如下&#xff1a; 自定义图标及指引线 代码&#xff1a; <div class"head-container" style"margin-left: -15px;"><el-tree icon-class"none"style"height:100%; overflow-y: h…