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

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

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

相关文章

controller不同的后端路径对应vue前端传递数据发送请求的方式

目录 案例一: 为什么使用post发送请求,参数依旧会被拼接带url上呢?这应该就是param 与data传参的区别。即param传参数参数会被拼接到url后,data会以请求体传递 补充:后端controller 参数上如果没写任何注解&#xff0c…

Vue3抽屉(Drawer)

效果如下图:在线预览 APIs 参数说明类型默认值必传width宽度,在 placement 为 right 或 left 时使用string | number378falseheight高度,在 placement 为 top 或 bottom 时使用string | number378falsetitle标题string | slotundefinedfalse…

sheng的学习笔记-hive框架原理

需要学习的前置知识:hadoop 可参考 sheng的学习笔记-hadoop-CSDN博客 相关网址 官网:http://hive.apache.org 文档:https://cwiki.apache.org/confluence/display/Hive/GettingStarted https://cwiki.apache.org/confluence/display/Hive/…

FPGA SATA高速存储设计

今天来讲一篇如何在fpga上实现sata ip,然后利用sata ip实现读写sata 盘的目的,如果需要再速度和容量上增加,那么仅仅需要增加sata ip个数就能够实现增加sata盘,如果仅仅实现data的读写整体来说sata ip设计比较简单,下面…

华为开发者调试工具使用介绍(MDC)

MDC的开发过程的三大工具:MMC、MDS、Mind Studio,这三个工具完成了开发过程中的配置文件编写、代码编写以及AI模型的开发三个任务。除了开发,MDC还准备了两个调试工具,用于使用过程中数据的查看等。这一些调试工具分别对映射MDC中…

Claude走向开放

Claude的愿景一直是创建能够与人们协同工作并显著提升他们工作流程的人工智能系统。朝着这一方向迈进,Claude.ai的专业版和团队版用户现在可以将他们的聊天组织到项目中,将精选的知识和聊天活动整合到一个地方,并且可以让团队成员查看他们与C…

Redis发布、订阅模式(Pub/Sub)详解

Redis发布、订阅模式(PUB-SUB)详解 Redis的发布订阅(Pub/Sub)机制是一种消息通信模式,用于消息的广播。它允许多个客户端订阅(Subscribe)特定的频道(Channel)&#xff0c…

【unity笔记】八、Unity人物动画介绍

一、效果预览 本内容仅介绍为unity场景中的任务添加简单的动画效果。 二、小试牛刀 2.1 插件准备 在unity 中导入人物模型。常使用的免费人物模型和动画模型有Robot Kyle,Unity-Chan! Model,Basic Motions FREE。 其中Robot Kyle仅支持URP渲染。如…

喂饭级AI神器!免代码一键绘制图表,文本数据秒变惊艳视觉盛宴!

由于目前的AI生成图表工具存在以下几个方面的问题: 大多AI图表平台是纯英文,对国内用户来说不够友好;部分平台在生成图表前仍需选择图表类型、配置项,操作繁琐;他们仍需一份规整的数据表格,需要人为对数据…

盲源信道分离—FastICA算法性能仿真

本案例中使用Matlab软件对FastICA算法的声音分离性能进行了仿真,分别对简单波形的混合信号、不同类型声音的混合信号、同一类型的混合信号这三种情况进行仿真,主要从分离信号的波形形状、串音误差两方面对分离性能进行衡量,仿真结果显示快速I…

APP 自动化测试框架如何设计?

自动化测试框架是为了增强测试效率和准确性而设计的工具。它可以帮助开发人员和测试人员在软件开发周期中自动执行各种测试任务。在本文中,我们将从零开始详细介绍如何设计一个自动化测试框架。 1. 确定测试需求: 在设计测试框架之前,首先需…

AMSR-E/Aqua 第 3 级全球地表土壤水分月平均值 V005 (AMSRE_AVRMO)

AMSR-E/Aqua level 3 global monthly Surface Soil Moisture Averages V005 (AMSRE_AVRMO) at GES DISC AMSR-E/Aqua level 3 global monthly Surface Soil Moisture Standard Deviation V005 (AMSRE_STDMO) at GES DISC 简介 GES DISC 的 AMSR-E/Aqua 第 3 级全球地表土壤水…

springboot + Vue前后端项目(第十九记)

项目实战第十九记 写在前面1. redis安装(windows安装)1.1 获取软件链接地址:1.2 启动redis1.3 测试是否启动成功1.4 通过 Another Redis DeskTop软件可视化查看redis 2. SpringBoot集成redis2.1 引入依赖2.2 注入RedisTemplate2.3 使用redis2.4 redis更新2.5 redis使…

Charles 忽略IP授权 Allow 弹窗

当有新的设备连接到 Charles 时,会出现如下弹框确认是否允许,如果希望允许所有客户端连接不再有提示,可以通过添加模糊IP规则来实现。 配置方法:Proxy > Access Control Settings 中添加 0.0.0.0/0 和 ::/0 即可,…

从0到1实现LLM学习笔记附录B(GPT-4o翻译版)

来源:https://github.com/rasbt/LLMs-from-scratch?tabreadme-ov-file https://www.manning.com/books/build-a-large-language-model-from-scratch

【redis】redis安装

1、安装前准备 1.1环境准备 VMware安装 参考博文:【VMware】VMware虚拟机安装_配置_使用教程_选择虚拟机配置选项,设置dvd镜像为 点击启动虚拟机-CSDN博客 安装centOS的linux操作系统 xshell xftp 参考博文:【Linux】Xshell和Xftp简介_安装_VMwar…

首次线下联合亮相!灵途科技携手AEye、ATI亮相2024 EAC 易贸汽车产业大会

6月22日,2024 EAC 易贸汽车产业大会在苏州国际博览中心圆满落幕,泛自动驾驶领域光电感知专家灵途科技携手自适应高性能激光雷达解决方案全球领导者AEye公司(NASDAQ:LIDR)及光电器件规模化量产巨头Accelight Technologies&#xff…

[计算机网络] 虚拟局域网

虚拟局域网 VLAN(Virtual Local Area Network,虚拟局域网)是将一个物理的局域网在逻辑上划分成多个广播域的技术。 通过在交换机上配置VLAN,可以实现在同一个VLAN 内的用户可以进行二层互访,而不同VLAN 间的用户被二…

用英文介绍伦敦:London The Empire MEGACITY

London: The Empire MEGACITY Link: https://www.youtube.com/watch?vZM7TBKD3a5U London is the capital of the United Kingdom and was the world’s largest city until 1925. Once the center of the massive British Empire, it is now a mature, well-planned metrop…

RK3588 Android13 TvSetting 中性能浮窗RAM显示bug

前言 电视产品,客户发现在设备偏好设置->高级设置->性能浮窗菜单里显示的 RAM 大小是错误的, 要求改成正确的,并且屏幕密度修改后,这个浮窗显示不全,也需要一起处理。 效果图 TvSetting 部分修改文件清单 bug 原因在于 Formatter.formatFileSize 这个 API,我们…