『跨端框架』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

找到我的电脑=》右键 点击属性=》点击高级系统设置 =》参考下图
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 missing
      Run `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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Java中的字符流

字符流字节流编码表 Java为什么可以区分字母和汉字 package day3; ​ import java.io.UnsupportedEncodingException; import java.lang.reflect.Array; import java.util.Arrays; ​ public class Test {public static void main(String[] args) throws UnsupportedEncoding…

【Mybatis 】什么是mybatis?如何在普通项目中使用?(超详细建议收藏)

文章目录 mybatis第一章1、什么是mybatis2、idea中配置环境3、创建一个普通工程 第二章1、mybatis基本步骤2、导入log4j日志3、使用lombok注解4、mapper.xml文件详情1、parameterType属性2、resultType属性 5、对实体包进行扫描6、SQL语句中的占位符及转义符7、接口方法包含多个…

Flutter笔记:Widgets Easier组件库(5)使用加减器

Flutter笔记 Widgets Easier组件库(5):使用加减器 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite:http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress…

【校招】校园招聘中的签约环节,面完HR后的流程(意向书,offer选择与三方协议)

【校招】校园招聘中的签约环节,面完HR后的流程(意向书,offer选择与三方协议) 文章目录 一、面完HR后的流程1、口头oc、谈薪(两个电话)2、邮件意向书、带薪offer(两封邮件)3、签三方&…

算法训练营第十三天 | LeetCode 239 滑动窗口最大值、LeetCode 347 前K个高频元素

LeetCode 239 滑动窗口最大值 本体初始思路是这样的,首先看下给定数组长度和维持一个滑动窗口所需要花费的时间复杂度之间的关系。初步判断是还行的,当然后面被样例打脸了。需要更新成优先队列的解法。原本的解法能通过37/51和46/51的测试用例。但这还不…

基于Spring Boot的校园疫情防控系统设计与实现

基于Spring Boot的校园疫情防控系统设计与实现 开发语言:Java框架:springbootJDK版本:JDK1.8数据库工具:Navicat11开发软件:eclipse/myeclipse/idea 系统部分展示 管理员登录首页界面图,管理员进入校园疫…

AI大模型探索之路-训练篇10:大语言模型Transformer库-Tokenizer组件实践

系列篇章💥 AI大模型探索之路-训练篇1:大语言模型微调基础认知 AI大模型探索之路-训练篇2:大语言模型预训练基础认知 AI大模型探索之路-训练篇3:大语言模型全景解读 AI大模型探索之路-训练篇4:大语言模型训练数据集概…

msmpi 高性能并行计算 移植并行细胞自动机报错

报错情况如图 代码来源 元胞自动机生命游戏C语言并行实现 – OmegaXYZ 稍微修改,因为相对路径在 msmpi 10.1.1 中失效 Microsoft Windows [版本 10.0.22000.2538] (c) Microsoft Corporation。保留所有权利。C:\Users\ASUS>mpiexec -n 9 "C:\Users\ASUS\D…

四信数字孪生水库解决方案,加快构建现代化水库运行管理矩阵

近年,水利部先后出台《关于加快构建现代化水库运行管理矩阵的指导意见》与《构建现代化水库运行管理矩阵先行先试工作方案》等文件,明确总体要求及试点水库、先行区域建设技术要求等,为全面推进现代化水库运行管理矩阵建设工作提供依据。 《2…

自定义Maven项目模板Archetype,快速创建模板项目。

自定义Archetype 创建好模板项目,在项目根目录执行命令对模板做出响应调整将模板安装到本地、远程仓库使用自定义模板 创建好模板项目,在项目根目录执行命令 mvn archetype:create-from-project对模板做出响应调整 如果是多模块项目,可能需…

【数据结构】:链表的带环问题

🎁个人主页:我们的五年 🔍系列专栏:数据结构 🌷追光的人,终会万丈光芒 前言: 链表的带环问题在链表中是一类比较难的问题,它对我们的思维有一个比较高的要求,但是这一类…

【模板】前缀和

原题链接:登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 前缀和模板题。 前缀和中数组下标为1~n。 前缀和:pre[i]pre[i-1]a[i]; 某段区间 [l,r]的和:pre[r]-pre[l-1] 3.…

【C语言】atoi和atof函数的使用

人生应该树立目标,否则你的精力会白白浪费。💓💓💓 目录 •🌙知识回顾 🍋知识点一:atoi函数的使用和实现 • 🌰1.函数介绍 • 🌰2.代码演示 • 🌰3.atoi函数的…

【高校科研前沿】云南大学陈峰研究员联合多家单位在Sci. Bull发文揭示了明末特大干旱背景下北京降水变化及其以太平洋海温变化为主导的驱动新机制

文章简介 论文名称:Coupled Pacific Rim megadroughts contributed to the fall of the Ming Dynasty’s capital in 1644 CE(环太平洋地区的特大干旱影响了公元 1644 年明朝的灭亡) 第一作者及通讯作者:陈峰研究员&王涛研究…

38-4 Web应用防火墙 - WAF的使用及规则

准备:38-3 Web应用防火墙 - 安装配置WAF-CSDN博客 WAF的使用 启动 Nginx /usr/local/nginx/sbin/nginx 为了测试未启动 ModSecurity 时的访问效果,我们可以模拟攻击。要查看当前虚拟机的 IP 地址,可以使用命令 ifconfig 浏览器中访问ip,如果要在真实机中访问就需要关闭…

Linux 学习 --- 编辑 vi 命令

1、vi 基本概念(了解) 基本上 vi 可以分为三种状态,分别是命令模式 (command mode)、插入模式 (Insert mode) 和底行模式 (last line mode),各模式的功能区分如下: 命令行模式 command mode)  控制屏幕光标的移动&a…

c3 笔记7 css基本语法

相关内容:字体、段落、词间距、文字效果(对齐、上下标、阴影)、背景图、背景渐变、…… 单位pt与px的差别pt是印刷使用的字号单位,不管屏幕分辨率是多少,打印到纸上看起来都是相同的,lot的长度是0.01384英寸…

[PS小技能学习]抠图和切图

详情见视频教程:PS小技巧--抠图与切图 今天我们来学习如何使用PS对表情包合辑进行抠图和裁剪保存 1、首先,将图片导入,双击图层新建一个图层 2、然后点击工具栏的魔棒工具,再点击顶部菜单栏的添加到选区 3、点击图片的空白区域即…

《QT实用小工具·五十一》带动画的 CheckBox

1、概述 源码放在文章末尾 该项目实现了带动画效果的多选框&#xff0c;鼠标放在上面或者选中都会呈现炫酷的动画效果&#xff0c;demo演示如下&#xff1a; 项目部分代码如下所示&#xff1a; #ifndef LINEARCHECKBOX_H #define LINEARCHECKBOX_H#include <QCheckBox> …

C/C++不定参函数使用

C语言中不定参函数的使用和访问 例子 例如&#xff0c;这里想写一个打印的函数&#xff0c;但是参数并不确定该怎么办呢&#xff0c;这就要用到不定参函数 #include<stdarg.h> void printNum(int count,...){va_list ap;va_start(ap,count);//获取指定参数的起始地址&…