『跨端框架』Flutter环境搭建

news2024/11/26 0:24:11

在这里插入图片描述

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

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

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

相关文章

解码Starknet Verifier:深入逆向工程之旅

1. 引言 Sandstorm为: 能提交独立proof给StarkWare的Ethereum Verifier,的首个开源的STARK prover。 开源代码见: https://github.com/andrewmilson/sandstorm(Rust) L2Beat 提供了以太坊上Starknet的合约架构图&…

全新TOF感知RGBD相机 | 高帧率+AI,探索3D感知新境界

海康机器人在近期的机器视觉新品发布会上推出的全新TOF感知RGBD相机,无疑是对当前机器视觉技术的一次革新。这款相机不仅融合了高帧率、轻松集成、体积小巧以及供电稳定等诸多优点,更重要的是,它将AI与3D感知技术完美结合,通过高帧率+AI算法,实现了对不同场景的快速捕捉与…

莫比乌斯变换的数学原理

一、说明 关于莫比乌斯变换,是一个代数几何变换的重要概念。也是双曲几何的重要理论,比如庞加莱盘就是建立在这个理论上,那么这个变换到底有哪些内容?本文将做出详细的解读。 二、线性变换和逆变换 在本节中,我们研…

SQL 基础 | AS 的用法介绍

SQL(Structured Query Language)是一种用于管理和操作数据库的标准编程语言。 在SQL中,AS关键字有几种不同的用法,主要用于重命名表、列或者查询结果。 以下是AS的一些常见用法: 重命名列:在SELECT语句中&a…

AI图书推荐:用ChatGPT快速创建在线课程

您是否是您领域的专家,拥有丰富的知识和技能可以分享?您是否曾想过创建一个在线课程,但被这个过程吓倒了?那么,是时候把这些担忧放在一边,迈出这一步了!有了这本指南和ChatGPT的帮助&#xff0c…

python学习笔记B-16:序列结构之字典--字典的遍历与访问

下面是字典的访问和遍历方法: d {10:"hello",20:"python",30:"world"} print(d[10],"--",d[20],"--",d[30]) print(d.get(10)) print("以上两种访问方式的区别是,d[key]若键是空值&#xff0c…

SMB 协议详解之-TreeID原理和SMB数据包分析技巧

在前面分析SMB协议数据包的过程中,这里,可以看到在SMB协议中存在很多的ID,即Unique Identifiers。那么这些ID表示什么含义?在实际分析数据包的过程中如何根据这些ID进行过滤分析?本文将介绍SMB/SMB2中的tree id ,并介绍如何通过tree id 快速的分析SMB数据包中各种命令交互…

抖音评论区精准获客自动化获客释放双手

挺好用的,评论区自动化快速获客,如果手动点引流涨,那就很耗费时间了,不是吗? 网盘自动获取 链接:https://pan.baidu.com/s/1lpzKPim76qettahxvxtjaQ?pwd0b8x 提取码:0b8x

【跟马少平老师学AI】-【神经网络是怎么实现的】(四)卷积神经网络

一句话归纳: 1)用1个小粒度的模式,逐个与图像的局部区域进行运算,运算结果反映模式与区域的匹配程度。 2)卷积神经网络与全连接神经网络的区别: 卷积神经网络的输出只与局部输入有连接。参数较少&#xff0…

【保姆级教程】用IDEA2023版本给RuoYi-Vue添加子模块

文章目录 前言添加子模块新建子模块新建子模块界面?新建子模块界面! 修改pom依赖配置RuoYiApplication添加测试接口配置接口权限测试 前言 若依前后端分离框架能够极大方便当前开发任务,并且使用的技术栈也相当丰富,但是目前只提…

优质短视频内容进阶SOP课

本课程致力于提升短视频内容创作标准化操作流程(SOP)。学员将学习视频策划、拍摄技巧、剪辑方法等,打造高质量短视频内容。通过实例分析和实践演练,学员将掌握优质内容制作的关键步骤,提升影响力和吸引力,成…

Linux搭建mysql环境

搭建 MySQL 环境 1、使用 wget 下载安装包,下载到 opt 目录中 wget http://dev.mysql.com/get/mysql57-community-release-el7-10.noarch.rpm2、安装 MySQL 公钥 rpm -i mysql57-community-release-el7-10.noarch.rpmrpm --import https://repo.mysql.com/RPM-GP…

ubuntu ros noetic 编译 ORB_SLAM2 过程记录

1. 连接 eigen库 sudo ln -s /usr/include/eigen3/Eigen /usr/include/Eigen 2. opencvx 修改 CMakeList.txt 中的 find_package open cv版本 修改 include/orbExtracter.h 文件为&#xff1a; //#include <opencv2/opencv.hpp> #include<opencv2/imgproc/imgpro…

Vite proxy-rewrite 属性详解

在前端开发中&#xff0c;为了避免跨域问题&#xff0c;我们会在vite.config.ts 中配置如下问题 rewrite: 由于不了解Nginx的知识&#xff0c;这个属性一直困扰着我&#xff0c;这个重写有啥用&#xff0c;加和不加有啥影响 server: {host: 0.0.0.0,proxy: {/api: {target: ht…

为什么3D模型材质是透明的?---模大狮模型网

在进行3D建模和渲染过程中&#xff0c;正确的材质设置是保证模型外观逼真和渲染效果良好的关键之一。然而&#xff0c;有时您可能会遇到3D模型材质变成透明的情况&#xff0c;这可能会导致意想不到的效果和渲染结果。本文将探讨一些可能导致3D模型材质变成透明的原因&#xff0…

【Java基础】Maven安装与配置

1. 前言 Maven是一个基于 Java 的项目管理工具&#xff0c;因此最基本的要求是在计算机上安装 JDK。 Maven 对系统要求如下表&#xff1a; 2. Java环境设置 在 Java 官方网站 下载并安装 JDK 7.0 及以上版本&#xff0c;如果您不了解 JDK 的安装和配置&#xff0c;请参考&…

《QT实用小工具·五十二》文本或窗口炫酷有趣的滚动条——果冻条

1、概述 源码放在文章末尾 该项目实现了文本或窗口纤细的滚动条——果冻条 一个可以像弓弦一样拉出来&#xff0c;并且来回弹动的普通滚动条。 思路为此&#xff0c;但发现实际效果更像条状果冻&#xff0c;并且略有谐音&#xff0c; 故&#xff0c;称之为——“果冻条”&am…

安装部署大语言模型 | 通义千问

下载安装 进入ollama的仓库下载 「 qwen 7b 」 libraryGet up and running with large language models.https://ollama.com/library查找阿里的 「 qwen 」 根据自己的电脑配置情况&#xff0c;选择合适的模型 总体来说&#xff0c;模型是越大&#xff0c;效果越好&#xff0c…

【热门话题】Stylus 入门与实践详解

&#x1f308;个人主页: 鑫宝Code &#x1f525;热门专栏: 闲话杂谈&#xff5c; 炫酷HTML | JavaScript基础 ​&#x1f4ab;个人格言: "如无必要&#xff0c;勿增实体" 文章目录 Stylus 入门与实践详解引言一、Stylus 简介1.1 什么是 Stylus&#xff1f;1.2 S…

LPO vs CPO:谁是数据中心光互连的领跑者?

在不断扩大的数据中心领域&#xff0c;速度和效率至关重要&#xff0c;光互连的主导地位之争已经到了关键时刻。激光相控振荡器&#xff08;LPO&#xff09;和相干相控振荡器&#xff08;CPO&#xff09;这两项强大的技术已成为彻底改变数据中心光互连竞赛的主要竞争者。本文深…