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

news2024/11/26 20:30:23

一、概述

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上。

另外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。(步骤6也是在此IDE中完成)

  5. 执照授权: flutter doctor --android-licenses

  6. 进入Android Studio,安装cmmmand-line tools

    img

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

    PUB_HOSTED_URL = https://pub.flutter-io.cn
    FLUTTER_STORAGE_BASE_URL = https://storage.flutter-io.cn
    

配置完成后,再次执行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

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


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

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

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

相关文章

自然语言处理:提取长文本进行文本主要内容(文本意思)概括 (两种方法,但效果都一般)

本文主要针对长文本进行文本提取和中心思想概括&#xff0c;原文档放在了附件里面&#xff1a;<科大讯飞公告> -----------------------------------方法一&#xff1a;jieba分词提取文本&#xff08;句子赋分法&#xff09;------------------------- 1、首先导入相关…

docker笔记7:Docker微服务实战

1.通过IDEA新建一个普通微服务模块 建Module docker_boot 改POM <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi…

【聚类】K-Means聚类

cluster&#xff1a;簇 原理&#xff1a; 这边暂时没有时间具体介绍kmeans聚类的原理。简单来说&#xff0c;就是首先初始化k个簇心&#xff1b;然后计算所有点到簇心的欧式距离&#xff0c;对一个点来说&#xff0c;距离最短就属于那个簇&#xff1b;然后更新不同簇的簇心&a…

nginx中模块的设置以及反向代理

nginx设置 nginx http 模块的配置文件位于 "/apps/nginx/conf/nginx.conf"&#xff08;以自己安装时选择的目录为准&#xff0c;若使用yum安装&#xff0c;则在 /etc/nginx/nginx.conf&#xff09;。在该文件中&#xff0c;需要定义一些常见的配置项&#xff0c;包括…

《Communicative Agents for Software Development》全文翻译

《Communicative Agents for Software Development》- 沟通性智能主体促进软件开发 论文信息Abstract1. Introduction2. CHATDEV2.1 聊天链2.2 设计2.3 编码2.4 测试2.5 记录 3. 实验4. 讨论5. 相关工作6. 结论 论文信息 题目&#xff1a;《Communicative Agents for Software…

TienChin 渠道管理-查看渠道接口

自定义 hasPermission 校验规则 自定义一个 Spring Security hasPermission 校验规则&#xff1a; 在 tienchin-framework 模块当中进行自定义&#xff0c;新建 CustomSecurityExpressionRoot.java 自定义 hasPermission 判断逻辑类&#xff1a; /*** author BNTang* version 1…

SSM框架-Spring框架核心知识梳理

目录 一、SpringIoC 1.1认识SpringIoC容器 1.2基于xml配置SpringIoC容器 1.3基于xml配置下Bean的生命周期和作用域 1.4 基于xml与注解配置SpringIoC容器 1.5 基于完全注解类配置SpringIoc容器 二、SpringAop面对切面编程 2.1认识SpringAop面向切面编程 2.2SpringAop基…

list【2】模拟实现(含迭代器实现超详解哦)

模拟实现list 引言&#xff08;实现概述&#xff09;list迭代器实现默认成员函数operator* 与 operator->operator 与 operator--operator 与 operator!迭代器实现概览 list主要接口实现默认成员函数构造函数析构函数赋值重载 迭代器容量元素访问数据修改inserterasepush_ba…

数学建模--二维插值函数模型的Python实现

目录 1.算法实现步骤 2.算法核心代码 3.算法效果展示 1.算法实现步骤 #二维插值函数的展示通过Axes3D函数来进行实现 #我们需要绘制出20*20的插值效果和500*500的插值效果,进行比较. 具体步骤如下所示: 1.将x-y分为20*20并且绘制网格图 2.进行20*20的插值计算并且绘制可视化图…

使用SimPowerSystems并网光伏阵列研究(Simulink实现)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

9.4.tensorRT高级(4)封装系列-使用pybind11为python开发扩展模块

目录 前言1. pybind112. 补充知识2.1 pybind11 介绍 总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 高级-使用p…

《网络是怎样连接的》(六)

本文主要取材于 《网络是怎样连接的》 第六章。 目录 6.1 服务器概览 6.2 服务器的接收操作 6.3 Web服务器程序解释请求消息并作出响应 6.4 浏览器接收响应消息并显示内容 简述&#xff1a;本文主要内容是解释 网络包到达服务器之后&#xff0c;如何给客户端响应的。 服务…

电商实战项目(java)知识点整理(持续更新)《苍穹外卖》

一、重要知识点精讲 1.1 nginx反向代理 1. nginx反向代理好处&#xff1a; 1. 提高访问速度&#xff08;可以进行缓存&#xff0c;如果访问相同资源可以直接响应数据&#xff09; 2. 可以进行负载均衡&#xff08;如果没有nginx前端只能固定地访问后端某一台服务器&#xf…

Linux系统编程—socket网络编程

Linux系统编程—socket网络编程 理论概念1. TCP与UDP对比端口号作用 socket开发过程服务端1. socket 创建套接字2. bind 绑定IP端口3. listen 监听客户端4. accept 接收客户端5. read / write 数据传输 客户端1. socket 创建套接字2. connect 连接服务3. read / write 数据传输…

合宙Air724UG LuatOS-Air LVGL API控件--下拉框 (Dropdown)

下拉框 (Dropdown) 在显示选项过多时&#xff0c;可以通过下拉框收起多余选项。只为用户展示列表中的一项。 示例代码 -- 回调函数 event_handler function(obj, event)if (event lvgl.EVENT_VALUE_CHANGED) thenprint("Option:", lvgl.dropdown_get_symbol(obj)…

稀疏数组的实现

文章目录 目录 文章目录 前言 一 什么是稀疏数组? 二 稀疏数组怎么存储数据? 三 稀疏数组的实现 总结 前言 大家好,好久不见了,这篇博客是数据结构的第一篇文章,望大家多多支持! 一 什么是稀疏数组? 稀疏数组&#xff08;Sparse Array&#xff09;是一种数据结构&a…

Elastic-job分布式调度系统

一、定时任务实现方式 1、Thread方式 final int timeInterval 1000;Thread thread new Thread(new Runnable() {Overridepublic void run() {while (true){try {//每一秒执行一次Thread.sleep(timeInterval);System.out.println("run...");} catch (InterruptedE…

数据结构和算法(1):开始

算法概述 所谓算法&#xff0c;即特定计算模型下&#xff0c;旨在解决特定问题的指令序列 输入 待处理的信息&#xff08;问题&#xff09; 输出 经处理的信息&#xff08;答案&#xff09; 正确性 的确可以解决指定的问题 确定性 任一算法都可以描述为一个由基本操作组成的序…

SpringBoot核心原理与实践

第一章、SpringBoot简介 1、入门案例 2、官网创建压缩包程序 注意使用的版本pom文件中java --> 1.8、 springboot --> 2.5.0 3、SpringBoot快速启动 运行程序--找引导类 换技术、加技术--加starter 第二章、基础配置 1、配置文件格式 《1、端口号配置》 《2、将目录文…

React原理 - React Hooks

目录 扩展学习资料 React Hooks 编写函数组件 Hooks使命 Hooks解决了什么问题 Hooks原理 useState源码解析 mountState源码解析 Hooks应用 Hooks 实践 倒计时组件 练习 扩展学习资料 名称 链接 React Hooks 官方文档 Introducing Hooks – React useEffect 完整…