『跨端框架』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.rhkb.cn/news/318576.html

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

相关文章

Android14之解决报错:libncurses.so.5与libtinfo.so.5缺少问题(二百零九)

简介: CSDN博客专家,专注Android/Linux系统,分享多mic语音方案、音视频、编解码等技术,与大家一起成长! 优质专栏:Audio工程师进阶系列【原创干货持续更新中……】🚀 优质专栏:多媒…

【数据库主从架构】

【数据库主从架构】 1. 什么是数据库的主从架构1.1 主从复制1.1.1 MySQL的主从主从复制技术三级目录 1. 什么是数据库的主从架构 随着公司业务线的增多,各种数据都在迅速增加,并且数据的读取流量也大大增加,就面临着数据安全问题,…

Spring Boot | Spring Security ( SpringBoot安全管理 )、Spring Security中 的 “自定义用户认证“

目录 : Spring Boot 安全管理 :一、Spring Security 介绍二、Spring Security 快速入门2.1 基础环境搭建 :① 创建Spring Boot 项目② 创建 html资源文件③ 编写Web控制层 2.2 开启安全管理效果测试 :④ 添加 spring-boot-starter-security 启动器⑤ 项目启动测试 三…

Vue Cli脚手架—安装Nodejs和Vue Cli

一,Vue Cli 文档地址: https://cli.vuejs.org/zh/ 二,.环境配置,搭建项目 1.安装node.js 2.下载 node.js10.16.3 地址: https://nodejs.org/en/blog/release/v10.16.3/ 3.安装 node.js10.16.3 , 直接下一步即可, 安装到 d:\program\nodejs…

【kettle006】kettle访问华为openGauss高斯数据库并处理数据至execl文件

1.一直以来想写下基于kettle的系列文章,作为较火的数据ETL工具,也是日常项目开发中常用的一款工具,最近刚好挤时间梳理、总结下这块儿的知识体系。 2.熟悉、梳理、总结下华为openGauss高斯数据库相关知识体系 3.欢迎批评指正,跪谢…

浅论汽车研发项目数字化管理之道

随着汽车行业竞争不断加剧,汽车厂商能否快速、高质地推出贴合市场需求的新车型已经成为车企竞争的重要手段,而汽车研发具备流程复杂、专业领域多、协作难度大、质量要求高等特点,企业如果缺少科学健全的项目管理体系,将会在汽车研…

低空经济+飞行汽车:eVTOL技术详解

低空经济是以各种有人驾驶和无人驾驶航空器的各类低空飞行活动为牵引,辐射带动相关领域融合发展的综合性经济形态。它广泛体现于第一、第二、第三产业之中,在促进经济发展、加强社会保障、服务国防事业等方面发挥着日益重要的作用。 飞行汽车&#xff0c…

SpringBoot配置HTTPS及开发调试

前言 在实际开发过程中,如果后端需要启用https访问,通常项目启动后配置nginx代理再配置https,前端调用时高版本的chrome还会因为证书未信任导致调用失败,通过摸索整理一套开发调试下的https方案,特此分享 后端配置 …

“酒店涨价?火车票难求?看‘房贷自由族’如何玩转最燃五一“

今年五一,很可能是近几年旅游最疯狂的一年——虽然酒店价格狂飙好几倍,也抢不到火车票,人们却依然有着疯狂的出游和消费欲望。 ​最直接的原因大概是很多人离开了房贷,活明白了吧。就拿我身边的一些房奴们来说,已经陆…

大数据面试题 —— Spark数据倾斜及其解决方案

目录 1 调优概述2 数据倾斜发生时的现象3 数据倾斜发生的原理4 如何定位导致数据倾斜的代码4.1 某个 task 执行特别慢的情况4.2 某个 task 莫名其妙内存溢出的情况5 查看导致数据倾斜的 key 的数据分布情况6 数据倾斜的解决方案6.1 使用 Hive ETL 预处理数据6.2 过滤少数导致倾…

【Java EE】Mybatis之XML详解

文章目录 🎍配置数据库连接和MyBatis🍀写持久层代码🌸添加mapper接口🌸添加UserInfoXMLMapper.xml🌸单元测试 🌲CRUD🌸增(Insert)🌸删(Delete)🌸改(Update)🌸…

GaussDB数据库事务管理

一、引言 事务管理是数据库系统中至关重要的一部分,它确保了数据库的一致性和可靠性。在GaussDB数据库中,事务管理不仅遵循传统的ACID特性,还提供了一些高级功能。本文将深入探讨GaussDB数据库事务管理的各个方面。 二、事务的基本概念 2.1…

es环境安装及php对接使用

Elasticsearch Elasticsearch 是一个分布式、高扩展、高实时的搜索与数据分析引擎。它提供了一个分布式多用户能力的全文搜索引擎,基于RESTful web接口。Elasticsearch是用Java语言开发的,并作为Apache许可条款下的开放源码发布,是一种流行的…

【小沐学Java】VSCode搭建Java开发环境

文章目录 1、简介2、安装VSCode2.1 简介2.2 安装 3、安装Java SDK3.1 简介3.2 安装3.3 配置 4、安装插件Java Extension Pack4.1 简介4.2 安装4.3 配置 结语 1、简介 2、安装VSCode 2.1 简介 Visual Studio Code 是一个轻量级但功能强大的源代码编辑器,可在桌面上…

FP16、BF16、INT8、INT4精度模型加载所需显存以及硬件适配的分析

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

让抖音引流更简单,利用自动评论引流策略

在当前的社会环境中,抖音已经成为了许多人日常生活中不可或缺的一部分。无论是年轻人还是中老年人,都对抖音充满了热情。然而,对于一些想要通过抖音变现的人来说,他们可能会感到困惑,不知道如何操作。今天,…

rust疑难杂症

rust疑难杂症解决 边碰到边记录,后续可能会逐步增加,备查 cargo build时碰到 Blocking waiting for file lock on package cache 原因是Cargo 无法获取对包缓存的文件锁, 有时vscode中项目比较多,如果其中某些库应用有问题&…

nginx--自定义日志跳转长连接文件缓存状态页

自定义日志服务 [rootlocalhost ~]# cat /apps/nginx/conf/conf.d/pc.conf server {listen 80;server_name www.fxq.com;error_log /data/nginx/logs/fxq-error.log info;access_log /data/nginx/logs/fxq-access.log main;location / {root /data/nginx/html/pc;index index…

golang 基础知识细节回顾

之前学习golang的速度过于快,部分内容有点囫囵吞枣的感觉,写gorm过程中有很多违反我常识的地方,我通过复习去修正了我之前认知错误和遗漏的地方。 itoa itoa自增的作用在编辑error code时候作用很大,之前编辑springboot的error c…

【JAVA基础之反射】反射详解

🔥作者主页:小林同学的学习笔录 🔥mysql专栏:小林同学的专栏 1.反射 1.1 概述 是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法; 对于任意一个对象,都能够调用它…