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网站 https://docs.flutter.dev/get-started/install?hl=zh-cn

[2] Android Developer https://developer.android.google.cn/studio/releases?hl=en

相关推荐
stm 学习ing33 分钟前
HDLBits训练6
经验分享·笔记·fpga开发·fpga·eda·verilog hdl·vhdl
stm 学习ing1 小时前
HDLBits训练4
经验分享·笔记·fpga开发·课程设计·fpga·eda·verilog hdl
炸毛的飞鼠1 小时前
汇编语言学习
笔记·学习
yuanlaile2 小时前
纯Dart Flutter库适配HarmonyOS
flutter·华为·harmonyos·flutter开发鸿蒙·harmonyos教程
yuanlaile2 小时前
Flutter开发HarmonyOS 鸿蒙App的好处、能力以及把Flutter项目打包成鸿蒙应用
flutter·华为·harmonyos·flutter开发鸿蒙
风无雨2 小时前
react杂乱笔记(一)
前端·笔记·react.js
胡西风_foxww2 小时前
【ES6复习笔记】Class类(15)
javascript·笔记·es6·继承··class·静态成员
2301_815389373 小时前
【笔记】下载mysql5.7
笔记
zacksleo3 小时前
鸿蒙原生开发手记:04-一个完整元服务案例
flutter
m0_748233885 小时前
黑马程序员JavaWeb开发教程(前端部分) ---笔记分享
前端·笔记