『跨端框架』Flutter环境搭建

在这里插入图片描述

『跨端框架』Flutter环境搭建

  • 资源网站
  • 简介
    • 跨平台
    • 高性能
    • 发展历程
    • 跨平台框架的比较
    • 成功案例
  • 环境搭建(windows)
    • 基础环境
    • 搭建Windows下的安卓环境
    • 搭建Mac下的安卓环境
    • 配置资源镜像
    • JDK
    • Android Studio
    • Flutter SDK
      • 问题一
      • 问题二
      • 问题三
      • 修改项目中的Flutter版本
  • 初始化项目
    • 通过vscode创建项目
      • 创建项目
      • 修改镜像源
      • 运行项目
    • 通过AS创建项目

资源网站

Flutter官网:https://flutter.cn/
Dart官网:https://dart.cn/
Flutter实战第二版:https://book.flutterchina.club/
Flutter中文社区:https://flutterchina.club/
开源UI框架:https://blog.csdn.net/kongTy/article/details/120218937
第三方开源库:https://www.jianshu.com/p/7f02a4e615ec
在线编译:https://dartpad.cn/

简介

Flutter是谷歌开发的一款开源, 免费的,基于Dart语言的UI框架,可以快速在IOS和Android上构建高质量的原生应用,而且还可以构建桌面应用,web应用和嵌入式应用。它最大的特点就是跨平台和高性能。
Dart是由谷歌,在2011年开发的计算机编程语言,它可以被用于web, 服务器,移动应用和物联网等多个领域。号称要取代 JavaScript

跨平台

跨平台最大的优势就是:节省开发成本,一统天下。这也是谷歌公司的野心和战略部署

  • Dart统一前端
  • Golong统一后端

虽然很多公司确实有从Java转为go去开发后端,在移动端开发中Flutter也越来越火,但是说统一前后端很难,至少特定的语言诞生于特定的环境用来解决特定的问题,一门语言想”一统天下“,不可能做到面面俱到。

高性能

Flutter 应用的性能,接近原生app.
Flutter 采用 用GPU (图形显示)渲染技术。
Flutter 应用的刷新频率可达120fps (120帧每秒)
可以用Flutter来开发游戏
React Native 开发的应用的刷新频率只能达到60fps(60帧每秒)

发展历程

2015,Flutter(当时叫sky) 在dart开发者峰会上亮相,其目的就是能够以每秒120帧的速度持续渲染。
2018-6, Flutter 发布了首个预览版本
2018-12,Flutter1.0发布
2019-9,Flutter 1.9发布,添加web端支持
2020-9,Flutter 1.22发布,带来了对ios14和a 和android 11的支持
2021-3,Flutter 2.0发布
2022-5,Flutter 3.0发布
当前版本(截至2024年4月):Flutter 3.19.2
因为是出于学习的目的,所以不使用最新版本的。本文使用的是:Flutter 3.13.9

跨平台框架的比较

image.png

成功案例

image.png

环境搭建(windows)

基础环境

Windows系统上只能搭建Android开发环境
Mac系统上可以搭建Android和IOS的开发环境
个人喜欢用Android Studio,不过VScode也是一款热门的Flutter IDE
VScode下载:https://code.visualstudio.com/docs/?dv=win

搭建Windows下的安卓环境

在 Windows 操作系统上安装和配置 Flutter 开发环境:可以在这个链接查看flutter doctor命令的使用
https://flutter.cn/docs/get-started/install/windows
JDK和Android Studio默认已经装好了,不再记录。
从如上的链接下载Flutter 的SDK压缩包,然后解压缩,并把.../flutter/bin路径配置到windows的环境变量中
我下载的是3.13版本
image.png

搭建Mac下的安卓环境

额,还没有Mac设备

配置资源镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,可以将下面的资源地址加到环境变量中:
在中国网络环境下使用 Flutter:https://flutter.cn/community/china

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

使用过程中发现使用以上镜像也可能遇到网络错误,如果遇到可以尝试修改为 清华镜像:

PUB_HOSTED_URL=https://mirrors.tuna.tsinghua.edu.cn/dart-pub
FLUTTER_STORAGE_BASE_URL=https://mirrors.tuna.tsinghua.edu.cn/flutter

找到我的电脑=》右键 点击属性=》点击高级系统设置 =》参考下图
image.png
image.png

JDK

JDK下载略

Android Studio

安装AS略

Flutter SDK

下载Flutter SDK压缩包:https://flutter.cn/docs/release/archive?tab=windows
然后解压到一个指定路径下,并配置好环境变量:
image.png
验证flutter安装是否成功:

flutter doctor

运行之后发现绿色的是运行成功的,感叹号和红色叉叉是存在问题
image.png

问题一

授权问题

[!] Android toolchain - develop for Android devices (Android SDK version 33.0.1)X cmdline-tools component is missingRun `path/to/sdkmanager --install "cmdline-tools;latest"`See https://developer.android.com/studio/command-line for more details.X Android license status unknown.Run `flutter doctor --android-licenses` to accept the SDK licenses.See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.

解决措施:https://blog.csdn.net/u013365445/article/details/120600314
切换到sdkManger的位置,sdkmanager.bat在sdk的tools/bin目录下,然后在执行命令
image.png

sdkmanager --install "cmdline-tools;latest"
flutter doctor --android-licenses

如若还是不行,进入AS的Android SDK Tools下勾选8.0的版本,再次执行如上命令
image.png

问题二

问题二是桌面端开发的配置
找到Flutter的安装目录下,以管理员方式启动flutter_console,输入如下代码:
image.png
安装window 桌面端开发sdk
image.png

问题三

如果找不到某一个开发工具的位置,可以使用如下命令更改
如何修改开发工具在flutter中的路径配置,如下是修改Android Studio的路径配置。
image.png

修改项目中的Flutter版本

image.png

初始化项目

通过Android Studio初始化项目就不记录了,主要记录以下VSCode创建项目。开发过程中使用AS比较多,所以比较熟悉,但是VSCode也不能完全不会使用。

通过vscode创建项目

创建项目

flutter create [项目名]

image.png

修改镜像源

防止每次创建项目都像如下一样需要修改项目的build.gradle文件,可以直接修改flutter sdk的配置文件,让每一次创建新的项目都是使用配置文件里的内容image.png
修改Flutter SDK的build.gradle.kts文件

maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'https://maven.aliyun.com/repository/public' }
maven { url 'https://maven.aliyun.com/nexus/content/groups/public' }

这是我的安装地址D:\Android\Flutter\flutter3.13\flutter\packages\flutter_tools\gradle
找到文件发现是kts格式,用下面替换

repositories {maven { url = uri("https://maven.aliyun.com/repository/google") }maven { url = uri("https://maven.aliyun.com/repository/jcenter") }maven { url = uri("https://maven.aliyun.com/repository/public") }maven { url = uri("https://maven.aliyun.com/nexus/content/groups/public") }
}

image.png

运行项目

fullter run

通过vscode运行项目,可以实现实时热更新

通过AS创建项目


image.png

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

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

相关文章

厂家自定义 Android Ant编译流程源码分析

0、Ant安装 Windows下安装Ant: ant 官网可下载 http://ant.apache.org ant 环境配置: 解压ant的包到本地目录。 在环境变量中设置ANT_HOME,值为你的安装目录。 把ANT_HOME/bin加到你系统环境的path。 Ubuntu下安装Ant: sudo apt…

visio studio 中.NET Core(.net8.0)框架和.net framewok 框架有什么区别?

更新vs到2022版本后,新建项目时就多出不少选项,这里来个大家分享下.NET Core(.net8.0)框架和.net framewok的区别 如下图,不带后缀的就是使用.NET Core框架,后续选项是.net8.0。 .net framewok框架选项&am…

从0到1:商场导览小程序开发笔记一

背景 购物中心与商场小程序:旨在提供便捷的购物、导航、活动报名、服务查询等功能,让用户更好地体验购物和享受服务。通过提供便捷的购物、信息查询和互动预约等功能,提升了商场的服务水平和用户体验,帮助商场与消费者建立更紧密…

YOLOv5入门(四)训练自己的目标检测模型

前言 通过前面几篇文章,已经完成数据集制作和环境配置(服务器),接下来将继续实践如何开始训练自己数据集~ 往期回顾 YOLOv5入门(一)利用Labelimg标注自己数据集 YOLOv5入门(二)处…

Android 14 init进程解析

前言 当bootloader启动后,启动kernel,kernel启动完后,在用户空间启动init进程,再通过init进程,来读取init.rc中的相关配置,从而来启动其他相关进程以及其他操作。 init进程启动主要分为两个阶段&#xff1…

jsPDF + html2canvas + Vue3 + ts项目内,分页导出当前页面为PDF、A 页面内导出 B 页面的内容为PDF,隐藏导出按钮等多余元素

jsPDF html2canvas Vue3 ts Arco Design项目&#xff0c;分页导出当前页面为PDF、A 页面内导出 B 页面的内容为PDF&#xff0c;隐藏导出按钮等多余元素… 1.下载所需依赖 pnpm install --save html2canvaspnpm install --save jspdf引入依赖 <script setup lang"…

OpenCV 库来捕获和处理视频输入和相似度测量(73)

返回:OpenCV系列文章目录&#xff08;持续更新中......&#xff09; 上一篇:OpenCV的周期性噪声去除滤波器(70) 下一篇 :OpenCV系列文章目录&#xff08;持续更新中......&#xff09; ​ 目标 如今&#xff0c;拥有数字视频录制系统供您使用是很常见的。因此&#xff0c;您…

FreeBSD RISCV 在QEME中实践-网络配置

在前一篇文章中&#xff0c;我们一起进行了FreeBSD RISCV 在QEME中实践 现在&#xff0c;让我们配置好网络吧&#xff01; 先上结论&#xff1a;用默认配置启动即可&#xff0c;网络就加载好了&#xff0c;只是不能ping罢了。因为不能ping&#xff0c;以为网络没通&#xff0…

opencv图片的平移-------c++

图片平移 cv::Mat opencvTool::translateImage(const cv::Mat& img, int dx, int dy) {// 获取图像尺寸int rows img.rows;int cols img.cols;// 定义仿射变换矩阵cv::Mat M (cv::Mat_<float>(2, 3) << 1, 0, dx, 0, 1, dy);// 进行仿射变换cv::Mat dst;cv…

[附源码+视频教程]暗黑纪元H5手游_架设搭建_畅玩三网全通西方3D世界_带GM

本教程仅限学习使用&#xff0c;禁止商用&#xff0c;一切后果与本人无关&#xff0c;此声明具有法律效应&#xff01;&#xff01;&#xff01;&#xff01; 教程是本人亲自搭建成功的&#xff0c;绝对是完整可运行的&#xff0c;踩过的坑都给你们填上了 一. 演示视频 暗黑纪…

目标检测——水下垃圾数据集DeepTrash

引言 亲爱的读者们&#xff0c;您是否在寻找某个特定的数据集&#xff0c;用于研究或项目实践&#xff1f;欢迎您在评论区留言&#xff0c;或者通过公众号私信告诉我&#xff0c;您想要的数据集的类型主题。小编会竭尽全力为您寻找&#xff0c;并在找到后第一时间与您分享。 …

[图解]不变式的构造和化简

1 00:00:02,420 --> 00:00:03,380 下面这个&#xff0c;我们来看 2 00:00:03,390 --> 00:00:09,940 X→select&#xff08;Y&#xff09;&#xff0c;用Y这个条件来筛选 3 00:00:09,950 --> 00:00:11,340 之后得到的集合 4 00:00:12,400 --> 00:00:14,390 forAl…

SD-WAN介绍,为何成为主推。

1、SD-WAN&#xff08;Software Defined Wide Area Network&#xff0c; 软件定义的广域网&#xff09; 将企业的分支、总部和多云之间互联起来&#xff0c;应用在不同混合链路&#xff08;MPLS&#xff0c;Internet&#xff0c;5G&#xff0c;LTE等&#xff09;之间选择最优的…

EmotionBench—— 基于 LLM 情绪的量化框架

介绍 大型语言模型&#xff08;LLM&#xff09;在近年来取得了显著的进展&#xff0c;这在计算机科学领域被视为一个重要的里程碑。像ChatGPT和Claude这样的综合性软件已经不再仅仅是用于句子校正、文本翻译和编程的工具&#xff0c;它们已经演进成为类似于人类的助手。因此&a…

Linux 操作系统IPC

目录 1、IPC简介 1.1、共享内存 1.1.1 创建/访问共享内存 1.1.2 映射 1.1.3 解除映射 1.1.4 删除/修改共享内存 1.2 信号量集 1.2.1 创建信号量集合 1.2.2 信号量的初始化 1.2.3 信号量的还原和消耗 1.3 消息队列 1.3.1 概念 1.3.3 添加消息队列 1.3.4 读取消息…

社区养老服务|基于Springboot+vue的社区养老服务平台设计与实现(源码+数据库+文档)

社区养老服务平台 目录 基于Java的社区养老服务平台设计与实现 一、前言 二、系统设计 三、系统功能设计 1用户信息管理 2 服务信息管理 3服务申请管理 4公告信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#…

【Linux系统化学习】网络套接字(编写简单的UDP服务端和客户端)

目录 理解源IP地址和目的IP地址 认识端口号 端口号和进程ID的区别 源端口号和目的端口号 认识TCP和UDP协议 TCP协议 UDP协议 网络字节序 socket编程接口 socket常见API sockaddr结构 简单的UDP网络程序 UDP服务端 创建套接字 填充本地网络信息 绑定 收取消息 …

Amine-PEG-Amine,956496-54-1在生物成像、生物传感器等领域具有广泛的应用

【试剂详情】 英文名称 Amine-PEG-Amine&#xff0c;NH2-PEG-NH2 中文名称 氨基-聚乙二醇-氨基&#xff0c;氨基PEG氨基&#xff0c; 双端氨基聚乙二醇 CAS号 956496-54-1 外观性状 由分子量决定&#xff0c;液体或者固体 分子量 0.4k&#xff0c;0.6k&#xff0c;1k&…

千古一帝秦始皇的一生

在中国历史上&#xff0c;秦始皇绝对是最有资格被称之为‘千古一帝’的皇帝。 这不光是因为&#xff0c;他是中国的第一个皇帝&#xff0c;更是因为他奠定了中国两千多年的政治格局&#xff0c;让中国从此有了大一统的意识。 1、赵国生涯 公元前259年&#xff0c;秦始皇嬴政…

利用PS中Lab颜色模式进行简单调色?

【原图】 详细步骤如下&#xff1a; Step 1 : 打开PS&#xff0c;打开素材&#xff0c;点菜单栏&#xff0c;【图像】-【模式】-【Lab颜色】&#xff0c;效果如下图 Step2&#xff1a;ctrl(或command)m打开曲线工具&#xff0c;选择a通道&#xff0c;效果如下图。 Step3: 把标…