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)就可以了,可以去官网下载。

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


相关文章
|
13天前
|
iOS开发 MacOS
【Mac系统】解决Vscode中LeetCode插件不能刷剑指offer题库
文章讨论了解决Mac系统中Vscode里LeetCode插件无法刷剑指Offer题库的问题,并提供了一些相关的使用技巧和资源链接。
37 1
|
2月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
3月前
|
前端开发 C++ 容器
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
Flutter-完整开发实战详解(一、Dart-语言和-Flutter-基础)(1)
|
3月前
MAC下使用VSCode常用操作备忘录
MAC下使用VSCode常用操作备忘录
28 0
|
7天前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
27 1
|
18天前
|
TensorFlow 算法框架/工具 Python
【Mac 系统】解决VSCode用Conda成功安装TensorFlow但程序报错显示红色波浪线Unable to import ‘tensorflow‘ pylint(import-error)
本文解决在Mac系统上使用VSCode时遇到的TensorFlow无法导入问题,原因是Python解析器未正确设置为Conda环境下的版本。通过在VSCode左下角选择正确的Python解析器,即可解决import TensorFlow时报错和显示红色波浪线的问题。
28 9
|
14天前
|
JavaScript Linux iOS开发
【Mac系统】Vscode使用LeetCode插件报错‘leetcode.toggleLeetCodeCn‘ not found
在Mac系统下使用VSCode的LeetCode插件时遇到“leetcode.toggleleetcodecn”命令找不到的错误解决方法,主要是通过从Nodejs官网下载并安装最新版本的Node.js来解决环境配置问题。
34 0
|
16天前
【Vscode+Latex】Mac 系统Vscode的LaTeX中插入参考文献
在Mac系统下的VSCode环境中配置LaTeX工作流以便插入和引用参考文献的详细步骤。
30 0
|
2月前
|
开发框架 移动开发 Android开发
构建高效移动应用:探索Flutter开发框架
【6月更文挑战第28天】随着移动设备的普及,用户对移动应用的需求日益增长。开发者面临着在众多平台间提供无缝体验的挑战。本文深入探讨了Flutter框架如何通过其跨平台特性、热重载功能以及丰富的组件库简化移动应用的开发流程,同时确保高性能和优雅的用户界面设计。
39 2
|
3月前
|
Dart 安全
简化代码、提高效率:Dart和Flutter开发小技巧
在日常开发中,我们常常会使用一些常用的技巧或语法糖,以简化代码、提高开发效率。本文将分享一些在Dart和Flutter中常用的小贴士,帮助你更轻松地编写优雅高效的代码。
简化代码、提高效率:Dart和Flutter开发小技巧