Flutter环境搭建及新建项目

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6

一、下载安装压缩包

https://storage.flutter-io.cn/flutter_infra_release/releases/stable/windows/flutter_windows_3.10.6-stable.zip

二、解压缩

解压之后将里面的flutter整体拿出来

三、配置环境变量

将flutter/bin全路径配置到系统环境变量里面

四、运行flutter doctor

打开cmd命令窗口运行flutter doctor 命令

这个命令运行比较慢需要耐心等一会儿注意观察一些错误信息

五、解决flutter doctor检测出来的问题

1X cmdline-tools component is missing

X cmdline-tools component is missing

Run path/to/sdkmanager --install "cmdline-tools;latest"

See https://developer.android.com/studio/command-line for more details.

解决

打开Android Studio进入SDK Manager在SDK Tools栏下载Android SDK Command-line Tools (latest)

解决完成重新 flutter doctor得到提示信息如下

2X Android license status unknown.

X Android license status unknown.

Run ' flutter doctor --android-licenses ' to accept the SDK licenses.

See Windows install | Flutter for more details.

根据错误提示可以看到运行flutter doctor --android-licenses命令接受SDK许可

那就重新打开cmd命令床靠运行flutter doctor --android-licenses命令

运行flutter doctor --android-licenses命令又报错了

好吧先解决这个错误然后再去运行flutter doctor --android-licenses命令

3UnsupportedClassVersionError

Error: A JNI error has occurred, please check your installation and try again

Exception in thread "main" java.lang.UnsupportedClassVersionError: com/android/sdklib/tool/sdkmanager/SdkManagerCli has been compiled by a more recent version of the Java Runtime (class file version 61.0), this version of the Java Runtime only recognizes class file versions up to 52.0

at java.lang.ClassLoader.defineClass1(Native Method)

at java.lang.ClassLoader.defineClass(ClassLoader.java:756)

at java.security.SecureClassLoader.defineClass(SecureClassLoader.java:142)

at java.net.URLClassLoader.defineClass(URLClassLoader.java:473)

at java.net.URLClassLoader.access$100(URLClassLoader.java:74)

at java.net.URLClassLoader$1.run(URLClassLoader.java:369)

at java.net.URLClassLoader$1.run(URLClassLoader.java:363)

at java.security.AccessController.doPrivileged(Native Method)

at java.net.URLClassLoader.findClass(URLClassLoader.java:362)

at java.lang.ClassLoader.loadClass(ClassLoader.java:418)

at sun.misc.Launcher$AppClassLoader.loadClass(Launcher.java:355)

at java.lang.ClassLoader.loadClass(ClassLoader.java:351)

at sun.launcher.LauncherHelper.checkAndLoadMain(LauncherHelper.java:601)

解决方案检查本地安装的JDK版本是不是java8我的就是java8然后查看一下Android Studio的SDK Manager中的Android sDK Command-line Tools (latest)版本是多少我的版本是11与Java的版本8不匹配这里要匹配上所以我要重新下载Android sDK Command-line Tools (latest)版本号为8 的删掉现有的版本号为11的

下载完之后重新运行flutter doctor --android-licenses命令不在报错

4继续执行flutter doctor --android-licenses命令

上面说到继续运行flutter doctor --android-licenses命令不再报错但是会一直提示

XXXXXX(y/N)?

只需要一路都敲“y”同意接受就行这样就完成了SDK许可接受。

5X Visual Studio not installed

完成了上面的授权许可操作我们再次运行flutter doctor命令此时看到的提示信息如下一目了然需要我们下载安装 Visual Studio我们按照提示下载安装Visual Studio就行

[X] Visual Studio - develop for Windows

X Visual Studio not installed; this is necessary for Windows development.

Download at Download Visual Studio Tools - Install Free for Windows, Mac, Linux

Please install the "Desktop development with C++" workload, including all of its default components

下载安装的时候需要注意勾选C++桌面开发否则再次flutter doctor还是会提示Visual Studio有问题。

6Connected device (the doctor check crashed)

[☠] Connected device (the doctor check crashed)

X Due to an error, the doctor check did not complete. If the error message below is not helpful, please let us know

about this issue at https://github.com/flutter/flutter/issues.

X Exception: Unable to run "adb", check your Android SDK installation and ANDROID_SDK_ROOT environment variable:

D:\Development\Android\Sdk\platform-tools\adb.exe

安装完Visual Studio之后再次cmd运行flutter doctor报错信息如上具体的截图如下

解决这个问题是因为连接不到我本地安装的Android Studio的虚拟机无法启动adb.exe百度半天没找到原因后来发现我电脑上的零信任环境下面正在运行Android Studio。零信任是我电脑单独分配空间安装了一个公司的虚拟机环境做到代码物理隔绝。将零信任中的Android Studio关掉即可上面错误就不存在了。实际上就是零信任环境运行AS占用了我们的adb资源导致外面环境启动不了adb。

7Network resources

[!] Network resources

X A network error occurred while checking "Dart packages": 信号灯超时时间已到

X A network error occurred while checking "https://maven.google.com/": 信号灯超时时间已到

环境变量配置一下国内镜像可以解决上面的问题。

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

PUB_HOSTED_URL=Dart packages

配置如下

配置完之后再去运行flutter doctor命令

检测没什么问题了哈哈

六、创建一个fluuter项目尝试一下

Visual Studio Code、Android Studio/IntelliJ IDEA、Emacs 都可以作为Flutter的开发工具我用的是Android Studio。

1安装插件

Android Studio原本是无法直接选择创建flutter项目的需要先安装插件。我们打开File>Settings>Plugins搜索Flutter、Dart分别安装Flutter插件和Dart插件安装完之后重新启动Android Studio。

2创建项目

打开Android StudioNew>New Flutter Project...

配置好Flutter的Sdk路径Next

填写好项目名称、本地路径涉及到的平台、语言就可以Finish去创建了注意这里的项目名称不可以有大写字母Flutter不允许

浏览器上运行一下代码成功了

搞定收工

参考网站在 Windows 操作系统上安装和配置 Flutter 开发环境 - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter

阿里云国内75折 回扣 微信号:monov8
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6