Flutter Mac上使用VSCode支持Flutter开发(上)

简介: Flutter Mac上使用VSCode支持Flutter开发


1.安装VSCode


2.下载Flutter

官网下载 或者 Github下载

下载完成之后,需要建立一个文件夹存放Flutter,这个文件夹位置随意,最好放到方便自己管理的地方,比如我在桌面建立一个 Flutter 文件夹,将下载并且解压了的文件或者克隆的文件直接放入 Flutter 文件夹里面,因为我是在桌面创建的文件夹,那么地址也就是

/Users/xxx/Desktop/Flutter/flutte

bin文件路径

/Users/xxx/Desktop/Flutter/flutter/bin

效果图

Github下载 错误注意: 如果使用 ,我第一次使用的是直接下载ZIP包,但是却在 【3.配置Flutter】 路径之后报错如下

MacBook-Pro:~ MacBook-Pro$ flutter -h
Error: The Flutter directory is not a clone of the GitHub project.
The flutter tool requires Git in order to operate properly;
to set up Flutter, run the following command:
git clone -b stable https://github.com/flutter/flutter.git
错误告诉我们: 
flutter目录不是github项目的克隆 
需要用到git 
无法正常运行,要求我们使用克隆下载

那么我们就使用克隆下载Flutter, 下面链接中的 stable 是分支名,可以根据自己需求修改,

stable 分支是Flutter稳定分支,你可以跟踪master分支,但注意这是开发分支,所以稳定性要低得多,可以参考官方解释

$ git clone -b stable https://github.com/flutter/flutter.git

克隆下来的项目文件也还是放到 Flutter 文件夹中,这样下载就完成了。


3.配置Flutter

上面已经下载好Flutter, 也存放到文件夹, 那么我们来配置一下。

1.打开终端工具,输入命令:
$ vim ~/.bash_profile
2.加入下面代码到文件里

第3行路径是你在 Flutter 里面 bin文件路径, 也就上面下载里面贴出来的bin文件路径

这行可以根据你存放的路径更换,总之指定为bin路径就行。 第1,2行则是官方文件中说的镜像问题,所以我们直接添加进来。

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/xxx/Desktop/Flutter/flutter/bin:$PATH

添加好之后 :wq 保存。

配置完成后,需要用source命令重新加载一下

$ source ~/.bash_profile

4.检查Flutter

检查是否安装了 Flutter

方法一

$ flutter -h

如果没有安装就会出现【方法二】中的下载进度页面, 如果安装了则会出现

MacBook-Pro:~ MacBook-Pro$ flutter -h
Manage your Flutter app development.
Common commands:
flutter create <output directory>
Create a new Flutter project in the specified directory.
flutter run [options]
Run your Flutter application on an attached device or in an emulator.
Usage: flutter <command> [arguments]
Global options:
-h, --help                  Print this usage information.
......

如果安装成功之后, 还是需要使用 【方法二】 中的 $ flutter doctor 命令,检查开发环境。

方法二(推荐使用该方式)

$ flutter doctor

如果出现下面这样的页面,表示你Flutter还没下载,正在下载Flutter,文章上面的下载可以理解为是安装工具,现在才是正式安装:

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Downloading Dart SDK from Flutter engine 52c7a1e849a170be4b2b2fe34142ca2c0a6fea1f...
% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                             Dload  Upload   Total   Spent    Left  Speed
100  120M  100  120M    0     0  9310k      0  0:00:13  0:00:13 --:--:-- 10.3M

下载完成之后,就会开始安装:

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Downloading Dart SDK from Flutter engine 52c7a1e849a170be4b2b2fe34142ca2c0a6fea1f...
% Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                             Dload  Upload   Total   Spent    Left  Speed
100  120M  100  120M    0     0  9310k      0  0:00:13  0:00:13 --:--:-- 10.3M
Building flutter tool...
╔════════════════════════════════════════════════════════════════════════════╗
║                 Welcome to Flutter! - https://flutter.dev                  ║
║                                                                            ║
║ The Flutter tool anonymously reports feature usage statistics and crash    ║
║ reports to Google in order to help Google contribute improvements to       ║
║ Flutter over time.                                                         ║
║                                                                            ║
║ Read about data we send with crash reports:                                ║
║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting        ║
║                                                                            ║
║ See Google's privacy policy:                                               ║
║ https://www.google.com/intl/en/policies/privacy/                           ║
║                                                                            ║
║ Use "flutter config --no-analytics" to disable analytics and crash         ║
║ reporting.                                                                 ║
╚════════════════════════════════════════════════════════════════════════════╝
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure you trust this source!
Downloading Material fonts...                                       1.1s
Downloading android-arm-profile/darwin-x64 tools...                 0.7s
Downloading xxx
......

安装完成之后,就会继续执行上面因为下载中断的 $ flutter doctor 命令, 打印检查结果:

MacBook-Pro:~ MacBook-Pro$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.4 18E227, locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
✗ Unable to locate Android SDK.
  Install Android Studio from: https://developer.android.com/studio/index.html
  On first launch it will assist you in installing the Android SDK components.
  (or visit https://flutter.dev/setup/#android-setup for detailed instructions).
  If the Android SDK has been installed to a custom location, set ANDROID_HOME to that location.
  You may also want to add it to your PATH environment variable.
[!] iOS toolchain - develop for iOS devices (Xcode 10.1)
✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
    brew update
    brew install --HEAD usbmuxd
    brew link usbmuxd
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
✗ ios-deploy not installed. To install:
    brew install ios-deploy
✗ Brew can be used to install tools for iOS device development.
  Download brew at https://brew.sh/.
[!] Android Studio (not installed)
[!] VS Code (version 1.34.0)
✗ Flutter extension not installed; install from
  https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
! No devices available
! Doctor found issues in 5 categories.

你应该可以读出上面的检测结果(或者找翻译),有很多条目都没有通过。需要我们安装检测结果一条条进行安装,直到满足开发环境。(如果有[!]x标志,表示本行检测没有通过,就需要我们设置或者安装相应的软件了。)

有可能你的Android studio也没有安装,那么你要先安装这个编辑器,

安装好后,可以顺便下载Android SDK。打开 Android studio 就会自己弹出来安装 Android SDK,你只需要保证网络能下载就行了。另外MAC自带 java jdk,所以也不需要在另外下载了。

下载Android SDK的时候,记得开VPN,否则你会等到天荒地老。

Android Studio下载地址,下面两个都行:

MAC版官网下载地址

集合各平台版本下载

1、允许协议(android-licenses)

安装完成 Android Studio 和 Android SDK 之后,下面要做的就是允许协议(android-licenses)运行命令:

$ flutter doctor --android-licenses

然后让你输入Y/N的时候,一直输入Y就行了。输入N会失败,不要在挑战了。

如果出现下面错误,说明你的SDK版本不行,跑一下它给出的命令(建议开VPN,没有VPN也直接运行试试吧)。

A newer version of the Android SDK is required. To update, run:
/Users/xxx/Downloads/android-sdk/tools/bin/sdkmanager --update

执行上面命令更新,可能会报错如下:

Exception in thread "main" java.lang.NoClassDefFoundError: javax/xml/bind/annotation/XmlSchema
at com.android.repository.api.SchemaModule$SchemaModuleVersion.<init>(SchemaModule.java:156)
at com.android.repository.api.SchemaModule.<init>(SchemaModule.java:75)
at com.android.sdklib.repository.AndroidSdkHandler.<clinit>(AndroidSdkHandler.java:81)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:73)
at com.android.sdklib.tool.sdkmanager.SdkManagerCli.main(SdkManagerCli.java:48)
Caused by: java.lang.ClassNotFoundException: javax.xml.bind.annotation.XmlSchema
at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:582)
at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:190)
at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:499)
... 5 more

我是没有遇到上面这个错误,但是有人遇到了我就顺便记录进来了。如果真遇到了请保证你的java版本大于或等于1.8(java8)就可以了,可以去官网下载。

更新好之后重新运行协议命令。


相关文章
|
10月前
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡
156 1
|
9月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
564 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
8月前
|
人工智能 开发工具 C++
利用通义灵码AI在VS Code中快速开发扫雷游戏:Qwen2.5-Max模型的应用实例
本文介绍了如何利用阿里云通义灵码AI程序员的Qwen2.5-Max模型,在VS Code中一键生成扫雷小游戏。通过安装通义灵码插件并配置模型,输入指令即可自动生成包含游戏逻辑与UI设计的Python代码。生成的游戏支持难度选择,运行稳定无Bug。实践表明,AI工具显著提升开发效率,但人机协作仍是未来趋势。建议开发者积极拥抱新技术,同时不断提升自身技能以适应行业发展需求。
22568 18
利用通义灵码AI在VS Code中快速开发扫雷游戏:Qwen2.5-Max模型的应用实例
|
10月前
|
Dart 前端开发
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
361 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
9月前
|
前端开发 Java 编译器
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
255 36
当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
|
9月前
|
前端开发 Java Shell
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
597 20
【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
Dart 前端开发 容器
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
336 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
10月前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
821 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
9月前
|
Dart 前端开发 Android开发
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
272 4
【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
10月前
|
缓存 前端开发 Android开发
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程
471 12
【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程