Flutter笔记(一)- 安装和配置Flutter

一、下载Flutter

访问网址:https://docs.flutter.dev/get-started/install?hl=zh-cn
根据电脑所使用的操作系统的平台进行选择。笔者电脑的操作系统为Windows,因此选择如图1-1的Windows图片:
图1-1
图1-1 Flutter网站(一)

然后根据跳转的页面,选择图1-2的Android。
图1-2
图1-2 Flutter网站(二)

确定安装Flutter的系统需求:

1.硬件需求

需求最小配置推荐配置
X86_64 CPU 内核48
内存(GB)816
显示分辨率(像素)WXGA(1366x768)FHD(1920X1080)
可用磁盘空间(GB)11.060.0

2.软件需求

(1)操作系统
Flutter 支持 64 位版本的 Microsoft Windows 10 或更高版本。
(2)开发工具
Git for Windows 2.27及以上版本
Android Studio 23.2.1及以上版本

二、安装Flutter SDK

因为后续要在Android Studio中配置Flutter,因此选择
Download and install选项中展示的flutter_windows_3.22.1-stable.zip文件,如图2-1所示。
图2-1
图2-1 Flutter SDK下载网站
解压zip文件,笔者为了管理方便,将解压后的文件放置在D:\flutter\flutter_windows_3.22.1-stable\flutter,如图2-2所示:
在这里插入图片描述
图2-2 Flutter的解压后的目录

三、在Android Studio中配置Flutter

1.配置环境变量

为了配置Flutter Doctor能够正确连接服务,需要配置国内的镜像:
定义用户变量:
FLUTTER_STORAGE_BASE_URL和PUB_HOSTED_URL,它们的值分别

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

如图3-1所示。
图3-1
图3-1 设置相关的用户变量

编辑系统变量Path,使之能访问flutter\bin目录下相关的工具。
编辑的内容如图3-2。
在这里插入图片描述
图3-2 系统环境变量Path路径的设置
为了让Flutter可以检索到Android sdkmanager,避免出现“Android sdkmanager not found. Update to the latest Android SDK and ensure that the cmdline-tools are installed to resolve this.”这样的问题,设置系统变量ANDROID_HOME为Android的SDK所在的目录,例如图3-3所示。
在这里插入图片描述
图3-3 设置ANDROID_HOME变量

2. 测试Flutter Doctor

选择flutter/bin目录,选择flutter_console.bat,文件如图3-3所示。
在这里插入图片描述

图3-4 flutter_console.bat的所在目录
运行flutter_console.bat文件,进入Flutter的控制台。运行结果如图3-4所示。
在这里插入图片描述
图3-5 进入flutter控制台
然后在控制台中输入flutter doctor命令,运行结果类似图3-5。
在这里插入图片描述
图3-6 运行flutter doctor
如图3-6中,可以发现存在Android toolchain - develop for Android devices没有勾选,
则运行:

flutter doctor --android-licenses

通过键入y,允许所有的许可,如图3-6所示:
图3-6
图3-7 允许android licenses所有许可的界面
再次运行flutter doctor,这次,所有配置的都是正常。如图3-7所示。
图3-8
图3-8 配置正常界面

3.在Android Studio中安装插件

在Android Studio中选择File->Settings->Plugins中分别安装插件Dart和Flutter,安装成功后,如图3-6所示。
在这里插入图片描述
图3-9 Android Studio安装相关的插件Flutter和Dart,其中:

Flutter插件: 支持Flutter开发工作流 (运行、调试、热重载等).
Dart插件: 提供代码分析(输入代码时进行验证、代码补全等).

四、在Android Studio中新建Flutter项目

1.新建Flutter项目
选择File->New->New Flutter Project…菜单项,如图3-7所示。
在这里插入图片描述
图4-1 创建Flutter项目(一)
设置Flutter的SDK路径,如图4-2所示。
在这里插入图片描述
图4-2 设置Flutter SDK
选择"Next",进入配置项目的界面:
在这里插入图片描述
图4-3 配置flutter项目
选择“Create"创建一个命名为first_flutter_app的Flutter项目

2.运行Flutter项目
启动移动端的模拟器,然后运行上述的Flutter项目,如图4-4所示:
在这里插入图片描述
图4-4

注意:
在Android目录中将项目的build.gradle文件设置的仓库
google()

mavenCentral()
注释掉,取而代之为阿里、华为、清华大学的maven镜像源。
然后经过漫长的等待构建项目,得到最终的运行结果。
运行结果如图4-5所示。
在这里插入图片描述
图4-5 第一个Flutter项目的运行结果

参考文献
[1] Flutter网站 https://docs.flutter.dev/get-started/install?hl=zh-cn
[2] Android Developer https://developer.android.google.cn/studio/releases?hl=en

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

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

相关文章

国行版苹果Vision Pro即将发售 高昂定价吓退普通消费者?

2024年2月2日,苹果第一代空间计算设备Vision Pro在美国上市。6月28日,国行版苹果Vision Pro也将正式发售,别为256GB版29999元、512GB版31499元、1TB版32999元。不过从此前Vision Pro预售情况来看,Vision Pro的“杀手锏”在“价格”…

【应届应知应会】Linux常用指令

SueWakeup 个人主页:SueWakeup 系列专栏:学习技术栈 个性签名:保留赤子之心也许是种幸运吧 本文封面由 凯楠📸友情提供 目录 文件与目录管理 目录操作命令: ls [选项] [目录或文件] mkdir 文件操作命令&#xf…

多媒体本地化的五个步骤

多媒体本地化为试图在多个全球目的地建立市场的企业提供了许多好处。 由于多媒体并不局限于一个内容标签,因此您需要注意一些元素。 这个过程通常从翻译开始,但因为我们处理的是视频和音频,所以从一开始就要处理一个附加层。让我们从这里开…

SqlServer 2008远程过程调用失败,错误代码[0x800706be]

1、解决方式: 将SQL 2008 R2升级到SP1或SP2 下载地址:SQL Server 2008 R2 Service Pack 2下载地址

非最大值抑制(NMS)函数

非最大值抑制(NMS)函数 flyfish 非最大值抑制(Non-Maximum Suppression, NMS)是计算机视觉中常用的一种后处理技术,主要用于目标检测任务。其作用是从一组可能存在大量重叠的候选边界框中,筛选出最具代表…

初学51单片机之长短键应用定时炸弹及扩展应用

51单片机RAM区域划分 51单片机的RAM分为两个部分,一块是片内RAM,一块是片外RAM。 data: 片内RAM从 0x00 ~0x7F 寻址范围(0-127) 容量共128B idata: 片外RAM从 0x00~0xFF 寻址范围(0-255) 容量共256B pdata&am…

定位问题6.27 petal数据接口问题

petal接口响应结果 响应结果为空的数据,而我们需要的是正确的响应结果。 排查问题 确认接口是否正确 以下是爬虫的配置文件内容,我查看了PETAL_URL的接口,并询问接口开发人员,得知接口地址并未改变 确认接口请求体是否正确 我使…

记一次对ouija渗透测试c语言逆向学习

概要 初始知识 web应用枚举 二进制逆向 文件枚举 堆栈溢出 学到知识 hash长度攻击 任意文件读取 二进制逆向分析 信息收集 端口扫描 nmap --min-rate 1000 -p- 10.129.30.104 发现22,80,3000端口 网站探测 目录枚举 feroxbuster -u http://10.1…

“数字政协”平台如何提高政协工作效率?正宇软件助力建设!

随着信息技术的飞速发展,数字化已成为推动各行各业转型升级的重要力量。在政协工作中,数字政协平台的建设与运用,正成为提高政协工作效率、促进民主协商的重要手段。本文将从数字政协平台的功能特点、优势分析以及实践应用等方面,…

何用Vue3和Plotly.js打造交互式3D图

本文由ScriptEcho平台提供技术支持 项目地址:传送门 利用 Plotly.js 创建交互式动画图表 应用场景 本代码适用于需要创建交互式动画图表的数据可视化项目。例如,可以用来展示时间序列数据或比较不同函数的行为。 基本功能 该代码使用 Plotly.js 库…

架构师篇-5、架构语言-ArchiMate

内容摘要: TOGAF内容元模型TOGAF架构语言ArchiMate3ArchiMate实践案例分享 TOGAF内容框架【核心内容元模型】 作为一个通用且开放式的标准,TOGAF需要采用一种非常灵活的方式来对其内容元模型进行定义,从而使得不同的企业可以根据自身需要对…

头歌——机器学习——决策树案例

第1关:基于决策树模型的应用案例 任务描述 本关任务:使用决策树算法完成成人收入预测。 相关知识 为了完成本关任务,你需要掌握:1.数据特征处理,2.使用决策树算法完成成人收入预测。 数据处理及特征工程 本次任务…

2024最新特种设备(锅炉作业)题库分享。

1.锅炉蒸发量大小是由(  )决定的。 A.压力的高低 B.受压元件多少 C.受热面积大小 答案:C 2.哪项不是自然循环的故障?( ) A.停滞 B.倒流 C.下降管带汽 D.上升管带汽 答案:D 3.水冷壁被现代大型锅炉广泛采用的是(  )。 A.光管水冷壁 B.膜…

【C++】继承(详解)

前言:今天我们正式的步入C进阶内容的学习了,当然了既然是进阶意味着学习难度的不断提升,各位一起努力呐。 💖 博主CSDN主页:卫卫卫的个人主页 💞 👉 专栏分类:高质量C学习 👈 &#…

RabbitMQ安装部署

简介 RabbitMQ一款知名的开源消息队列系统,为企业提供消息的发布、订阅、点对点传输等消息服务。 RabbitMQ在企业开发中十分常见,课程为大家演示快速搭建RabbitMQ环境。 安装 rabbitmq在yum仓库中的版本比较老,所以我们需要手动构建yum仓库…

# Kafka_深入探秘者(8):kafka 高级应用

Kafka_深入探秘者(8):kafka 高级应用 一、kafka 消费组管理 1、kafka 命令行工具 参考官网: http://kafka.apache.org/22/documentation.html 2、kafka 消费组管理:查看消费组 # 切换到 kafka 安装目录 cd /usr/local/kafka/…

leetCode.91. 解码方法

leetCode.91. 解码方法 题目思路 题解 class Solution { public:int numDecodings(string s) {int n s.size();// dp 中f[0]一般不做使用&#xff0c;只是存一个初值1&#xff0c;表示默认由一种方案s s;vector<int> f( n 1 );f[0] 1;for ( int i 1; i < n;…

【数学】100332. 包含所有 1 的最小矩形面积 II

本文涉及知识点 数学 LeetCode100332. 包含所有 1 的最小矩形面积 II 给你一个二维 二进制 数组 grid。你需要找到 3 个 不重叠、面积 非零 、边在水平方向和竖直方向上的矩形&#xff0c;并且满足 grid 中所有的 1 都在这些矩形的内部。 返回这些矩形面积之和的 最小 可能值…

vant4的组件气泡弹出框van-popover,在列表中遍历后点击一个全部/显示隐藏,解决办法

环境&#xff1a;vue3 vant-ui4 <div v-for"(info, index) in item.infoListVOs" :key"index"><van-popoverv-model:show"showPopover":actions"actions"overlayplacement"bottom-end"select"onSelect(info…

软件工程全套学习培训资料,实际优质项目编制及各类建设方案,信息安全,运维资料

目的&#xff1a;规范系统开发流程&#xff0c;提高系统开发效率。 立项申请需求分析方案设计方案评审开发调整测试阶段系统培训试运行测试验收投入使用 所有文档过去进主页获取。 获取方式&#xff1a;本文末个人名片直接获取。 软件资料清单列表部分文档清单&#xff1a;工作…