Flutter安装配置教程

cci
319 阅读4分钟

本教程包含Flutter、Dart\JDK\Android SDK\Android Studio\Gradle安装及配置 dart最初是用来替换js的，因为js没有强类型，ts的出现解决了这个问题，如果你深受node-sass的版本迫害，可以试试dart编写的dart-sass。相信各位读者学dart是为学习flutter，而flutter包含了所有dart sdk，那就直接安装flutter，如果你想单独学一下dart那就安装dart SDK

Dart SDK安装

dart

找到适合你的

image-20240530231832292.png

解压后放到你喜欢的位置

image-20240530232017590.png 粘贴到bin的路径至 系统变量->path

image-20240530232722273.png

win+r->cmd执行

dart --version

出现版本就是装好了

新建dart结尾的文件

main(){
  print('hello world');
}

执行

image-20240530233923411.png

恭喜你又精通一门语言的hello world！！！

JDK配置

JDK 万年java8，由于android plugin最低要11,教程写完后改成了17

image-20240531011740774.png 安装到你喜欢的地方

系统变量配置

JAVA_HOME=C:\Program Files\Java\jdk1.8.0_321

image-20240531011526815.png

path配置

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin

image-20240531011612801.png

CMD执行java -version和javac,出现版本号和一堆信息就是成功了

安卓SDK配置

SDK

image-20240531005053238.png

解压到你喜欢的地方

image-20240531010053144.png

系统变量添加，指定SDK位置

ANDROID_HOME=D:\Development\SDK\android-sdk-windows

image-20240531021033095.png

path添加

%ANDROID_HOME%\platform-tools
%ANDROID_HOME%\tools

image-20240531024207371.png

双击SDK Manager.exe勾选（可选，出问题了再来加这个）

image-20240531010512041.png

image-20240531010649695.png

image-20240531010713357.png

CMD执行adb version出现版本号就是成功了

flutterSDK安装

flutter

找个适合你的

image-20240530233514068.png

解压后放到你喜欢的位置

image-20240530234628596.png

添加系统环境变量

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

image-20240531015110116.png

image-20240531015136033.png

把flutter bin添加到系统变量->path里

image-20240530234830145.png

双击flutter包下的flutter_console.bat，注意.git和.github文件千万别删了

image-20240530235944670.png

执行flutter doctor检查环境

识别不到安卓SDK

image-20240531013402762.png

使用命令指定安卓SDK的位置

flutter config --android-sdk D:\Development\SDK\android-sdk-windows

缺少必要的Android工具链cmdline-tools

image-20240531000843856.png

AndroidStudio里把这个勾上，一开始是蓝色的但是是一条白线，要打上勾才会下载

image-20240531024831152.png

licenses报错，缺少SDK许可证

image.png

执行flutter doctor --android-licenses，全部Y同意

Visual Studio报错

开发安卓应用不用管，如果打包到windows就装这个

An HTTP error occurred while checking不用管，网络不好，挂梯即可

image-20240531022354557.png

关闭窗口重新打开flutter_console.bat或者直接CMD，再次执行flutter doctor，这样就是成功了，现在是凌晨2：50，累了。。

image-20240531024939773.png

Visual Studio安装(报错不用管，如果打包到windows就装这个)

紫色的才是Visual Studio

装C++桌面开发和WindowsSDK

image-20240531025921530.png

Android Studio安装

Android Studio

系统变量添加,指定SDK路径

ANDROID_HOME=D:\Development\SDK\android-sdk-windows

image-20240531023812744.png 指定具体sdk位置

image.png 指定dart位置

image.png

Gradle安装配置

官网

image-20240531003518717.png

image-20240531003532562.png

解压到你喜欢的地方

系统变量里添加

GRADLE_HOME
GRADLE_USER_HOME

image-20240531004352457.png 和maven的存储库是一样的，你也可以自定义存储库的位置 image.png path里添加

%GRADLE_HOME%\bin

image-20240531004249327.png

CMD执行gradle -v验证，出现版本号就是成功了

AndroidStudio配置

插件File->Settings->Plugins

image-20240530235223291.png

新建flutter

image-20240530235406850.png

指定flutter安装路径

image-20240530235502531.png

改个项目名

image-20240531000304781.png

指定gradle路径，至少jdk11

image.png

指定SDK路径

image.png

真机调试

  • 安卓手机
  • 开启调试模式
  • 数据线连接电脑并允许USB调试
  • 安装手机对应的SDK（Android SDK下载）

模拟器调试

image-20240531032757805.png

创建设备

image-20240531032848126.png

装一个系统

image-20240531033209940.png

vscode配置

dart

image-20240530233251201.png

flutter

image-20240531034333747.png

code runner

image-20240530233334428.png

vscode打开创建的文件夹或者别人已经创建好的flutter项目也可以运行

image-20240531034609229.png

CMD常用命令

# 获取所有 flutter 命令
flutter
# 获取当前版本 Flutter SDK 的信息
flutter --version
# 创建项目
flutter create xxapp
# 指定语言创建项目
flutter create -i swift -a kotlin xxapp
# 创建 Plugin 插件
flutter create --template=plugin xxapp_plugin
# 检查flutter状态
flutter doctor
# 运行到手机（项目下执行）
flutter run
# 获取模拟器列表（iOS、Android模拟器）
flutter emulators
# 获取所有真机设备列表包括iOS模拟器
flutter devices
# 运行到所有端：web、手机、win
flutter run -d all
# 运行指定模拟器或者真机
flutter run -d <deviceId>
# 控制台点一下执行
# 热加载
r
# 热重启
R
# 显示网格
p
# 切换Android和IOS预览模式
o
# 退出调试预览模式
#  获取flutter项目中依赖的包，不包括 flutter sdk
flutter packages get
# 更新 flutter 项目依赖的包
flutter packages upgrade
分析代码
flutter analyze
# 打包apk
flutter build apk

win应用

image-20240531034827719.png

控制台有个链接可以查看调试信息

avatar
文章
阅读
粉丝