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

一、下载Flutter

访问网址:https://docs.flutter.dev/get-started/install?hl=zh-cn

根据电脑所使用的操作系统的平台进行选择。笔者电脑的操作系统为Windows,因此选择如图1-1的Windows图片:

图1-1 Flutter网站(一)

然后根据跳转的页面,选择图1-2的Android。

图1-2 Flutter网站(二)

确定安装Flutter的系统需求:

1.硬件需求

需求 最小配置 推荐配置
X86_64 CPU 内核 4 8
内存(GB) 8 16
显示分辨率(像素) WXGA(1366x768) FHD(1920X1080)
可用磁盘空间(GB) 11.0 60.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 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,它们的值分别

bash 复制代码
PUB_HOSTED_URL=https://pub.flutter-io.cn
FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

如图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-7 允许android licenses所有许可的界面

再次运行flutter doctor,这次,所有配置的都是正常。如图3-7所示。

图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网站 \[2\] Android Developer

相关推荐
RickyWasYoung21 分钟前
【笔记】智能汽车、电动汽车政策文件
笔记·汽车
●VON2 小时前
Flutter 项目成功运行后,如何正确迁移到 OpenHarmony?常见疑问与跳转失效问题解析
flutter·华为·openharmony·开源鸿蒙
●VON3 小时前
Flutter 编译开发 OpenHarmony 全流程实战教程(基于 GitCode 社区项目)
flutter·openharmony·gitcode
love530love3 小时前
【保姆级教程】Windows + Podman 从零部署 Duix-Avatar 数字人项目
人工智能·windows·笔记·python·数字人·podman·duix-avatar
草莓熊Lotso5 小时前
《算法闯关指南:动态规划算法--斐波拉契数列模型》--01.第N个泰波拉契数,02.三步问题
开发语言·c++·经验分享·笔记·其他·算法·动态规划
FFF团团员90911 小时前
树莓派学习笔记3:LED和Button
笔记·学习
碧海潮生_CC12 小时前
【CUDA笔记】04 CUDA 归约, 原子操作,Warp 交换
笔记·cuda
摇滚侠13 小时前
2025最新 SpringCloud 教程,从单体到集群架构,笔记02
笔记·spring cloud·架构
风123456789~13 小时前
【OceanBase专栏】OB背景知识
数据库·笔记·oceanbase
智者知已应修善业15 小时前
【51单片机普通延时奇偶灯切换】2023-4-4
c语言·经验分享·笔记·嵌入式硬件·51单片机