Flutter环境搭建及新建项目

一、下载安装压缩包

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检测出来的问题

1,X 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,得到提示信息如下:

2,X 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命令,

3,UnsupportedClassVersionError

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许可接受。

5,X 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有问题。

6,Connected 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。

7,Network 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 Studio,New>New Flutter Project...

配置好Flutter的Sdk路径,Next

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

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

搞定收工!!!!

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

相关推荐
ljt27249606611 天前
Flutter笔记--envied
前端·笔记·flutter
加农炮手Jinx1 天前
Flutter for OpenHarmony 实战:flutter_animate 声明式动画让 UI 灵动如原生
flutter·ui·华为·harmonyos·鸿蒙
里欧跑得慢1 天前
Flutter 像素级还原:设计稿到代码的视觉无损转换技巧
前端·css·flutter·web
里欧跑得慢1 天前
Flutter 三方库 function_tree — 鸿蒙应用开发中的动态数学公式解析与计算神器,实现鸿蒙深度适配下的复杂函数逻辑运行时求值实战(适配鸿蒙 HarmonyOS Next ohos)
android·前端·安全·flutter·华为·harmonyos
ssshooter2 天前
Tauri + GitHub Actions 自动化发布 Android APK 技术总结
android·github·android studio
吃西瓜的年年2 天前
vue3原理思维导图
vue.js·笔记·flutter
GitLqr2 天前
从代码复用走向生态:Flutter Dart Package 实战全指南
flutter·全栈·dart
SoaringHeart2 天前
Flutter 进阶:NCanvasImageLoader 让 Canvas 也能画网络图
前端·flutter
磐链科技3 天前
钱包开发中的跨平台架构:Flutter与Rust构建高性能移动端钱包
flutter·架构·rust