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

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

相关文章

HANA小知识点记录:SQL JOIN 条件中的条件判断(CASE WHEN )

今天写sql的时候要用到这个,查到其他数据库是这么写的: 在hana里试了下上面那样写不行,试了一下可以这么写,满足需求 LEFT JOIN "SAPHANADB"."/BI0/PCUSTOMER" AS F-- 通过附加客户关联客户主数据 ON CASE W…

探索高级聚类技术:使用LLM进行客户细分

在数据科学领域,客户细分是理解和分析客户群体的重要步骤。最近,我发现了一个名为“Clustering with LLM”的GitHub仓库,它由Damian Gil Gonzalez创建,专门针对这一领域提供了一些先进的聚类技术。在这篇文章中,我将概…

Redis__事务

文章目录 😊 作者:Lion J 💖 主页: https://blog.csdn.net/weixin_69252724 🎉 主题:Redis__事务 ⏱️ 创作时间:2024年05月02日 ———————————————— 这里写目录标题 文章目…

【hackmyvm】vivifytech靶机

渗透思路 信息收集端口扫描端口服务信息目录扫描爆破hydra--sshgit提权 信息收集 ┌──(kali㉿kali)-[~] └─$ fping -ag 192.168.9.0/24 2>/dev/null 192.168.9.119 --主机 192.168.9.164 --靶机个人习惯,也方便后续操作,将IP地址赋值给一个变…

微软如何打造数字零售力航母系列科普07 - Azure PlayFab:你从未想过的世界上最大的开发工具(平台)

Azure PlayFab:你从未想过的世界上最大的开发工具 微软的James Gwertzman告诉GamesIndustry.biz Academy他帮助开发者成功的使命 制作游戏比以往任何时候都更容易上手。现在有无数的游戏引擎可供选择,其中大多数是免费的,PC空间的店面也同样重…

高中数学:三角函数公式汇总及推导

一、定义 常用三角函数值 参考: 三角函数定义 二、基本三角函数及相互关系 sinx cosx tanx cscx secx cotx 函数间相互关系 参考: cosx、sinx、tanx的函数图像与性质 secx、cscx、cotx函数图像及相关关系 三、诱导公式 口诀:奇变…

RK3568平台(时间篇)看门狗

一.看门狗原理 在产品化的嵌入式系统中,为了使系统在异常情况下能自动复位,一般都需要引入看门狗。 看门狗其实就是一个可以在一定时间内被复位的计数器。当看门狗启动后,计数器开始自动计数,经过一定时间,如果没有被…

私有开源LLM实例的三个考虑因素

原文地址:three-considerations-for-private-open-source-llm-instances 2024 年 4 月 29 日 在生产应用中使用商业 LLM APIs 会带来明确且经过充分研究的风险。因此,企业越来越多地转向利用开源的私有托管LLM实例,并通过RAG技术进行增强。 介…

25 JavaScript学习:var let const

JavaScript全局变量 JavaScript中全局变量存在多种情况和定义方式,下面详细解释并提供相应的举例: 使用var关键字声明的全局变量: var globalVar "我是全局变量";未使用var关键字声明的变量会成为全局变量(不推荐使用&…

MathType如何使用LaTex代码编辑公式?MathType使用LaTex代码编辑公式教程 mathtype高仿latex

MathType专为解决数学公式输入问题打造,内置有自定义函数识别、国际性字符输入、拖放表达式、标签命名等丰富的功能,下面就来看看如何使用LaTex代码编辑公式吧。 MathType使用LaTex代码编辑公式教程 第一步:首先打开软件,并准备…

海亮杯总结

写在前面: 1001003002020270,rnk42,超级菜 你说的对,但是《第三届“海亮杯”》是由海亮教育集团自主研发的一款全新开放世界冒险游戏。游戏发生在一个被称作「浙江省诸暨海亮高级中学」的幻想世界,在这里,…

【电子取证篇】WinHex哈希校验值大小写转换和WinHex常规设置功能

【电子取证篇】WinHex哈希校验值大小写转换和WinHex常规设置功能 简单记录下WinHex哈希校验大小写值转换和新增加的一些功能、常用设置,WinHex时不时增加点小功能的,挺喜欢这种的,像挖宝藏一样,总会给你一些惊喜—【蘇小沐】 1、…

Python基础学习之sys.argv[0]及类似方法

前言 在Python编程中,经常会遇到要拿取当前代码路径或者当前代码名称,今天分享几个拿取的方法。 一.功能目的 拿取当前代码路径或者当前代码名称。 二.功能调研 根据搜索引擎,我们可以提取到以下信息: 1.sys.argv[0] 是脚本自身…

在浏览器中查看Revit模型:原理及实现

Greg Schleusner AIA 有一天向我提到,业内许多人认为带有 SVF2 的 Autodesk Viewer 是建筑模型最强大、性能最强的在线查看器之一,并且想知道开源 VIM 查看器和格式如何比较。 可以使用NSDT 3DConvert的 Revit插件 上传你的模型并在线查看预览&#xff…

全新神经网络架构KAN一夜爆火!200参数顶30万,MIT华人一作 | 最新快讯

白交衡宇发自凹非寺 量子位公众号 QbitAI 一种全新的神经网络架构 KAN,诞生了! 与传统的 MLP 架构截然不同,且能用更少的参数在数学、物理问题上取得更高精度。 比如,200 个参数的 KANs,就能复现 DeepMind 用 30 万参数…

如何同时或者按顺序间隔启动多个程序

首先,需要用到的这个工具: 度娘网盘 提取码:qwu2 蓝奏云 提取码:2r1z 1、打开工具,切换到定时器模块,快捷键:Ctrl3 2、新建一个定时器,我这里演示同时打开多个程序(比…

WPF基础应用

WPF参考原文 MVVM介绍 1.常用布局控件 1.1 布局控件 WPF(Windows Presentation Foundation)提供了多种布局容器来帮助开发者设计用户界面,以下是一些常用的布局: Grid: Grid是最常用的布局容器之一,它允许你通过定…

链表经典面试题上

目录 创作不易,如若对您有帮助,还望三连,谢谢!!! 题目一:203. 移除链表元素 - 力扣(LeetCode) 题目二:206. 反转链表 - 力扣(LeetCode&#xff…

22-ESP32-S3模数转换器(ADC)

ESP32-S3模数转换器(ADC) 什么是模数转换器(ADC)🔍? 模数转换器(ADC)是一种将模拟信号(如电压)转换为数字信号的设备。在ESP32-S3中,ADC用于将模…

深入图像分类:使用美国手语数据集训练定制化神经网络

引言 在前一篇博客中,我们探讨了如何使用MNIST数据集训练一个基础的神经网络来进行手写数字识别。在本文中,我们将更进一步,使用美国手语字母表(ASL)数据集来构建一个定制化的图像分类模型。通过这个过程,…