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

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


相关文章
|
4月前
|
开发框架 前端开发 测试技术
Flutter开发常见问题解答
Flutter开发常见问题解答
|
5天前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
23 7
|
12天前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。
|
24天前
|
JSON Dart Java
flutter开发多端平台应用的探索
flutter开发多端平台应用的探索
27 6
|
24天前
|
JSON Dart Java
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
flutter开发多端平台应用的探索 下 (跨模块、跨语言通信之平台通道)
|
26天前
|
安全 Android开发 开发者
探索安卓开发的未来:Kotlin的崛起与Flutter的挑战
在移动开发的广阔天地中,安卓平台始终占据着举足轻重的地位。随着技术的不断进步和开发者需求的多样化,Kotlin和Flutter成为了改变游戏规则的新玩家。本文将深入探讨Kotlin如何以其现代化的特性赢得开发者的青睐,以及Flutter凭借跨平台的能力如何挑战传统的安卓开发模式。通过实际案例分析,我们将揭示这两种技术如何塑造未来的安卓应用开发。
53 6
|
2月前
|
开发框架 Android开发 iOS开发
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
Flutter相关痛点解决问题之淘特选择桌面端开发框架如何解决
|
2月前
|
移动开发 前端开发 JavaScript
"跨界大战!React Native、Weex、Flutter:三大混合开发王者正面交锋,揭秘谁才是你移动应用开发的终极利器?"
【8月更文挑战第12天】随着移动应用开发的需求日益增长,高效构建跨平台应用成为关键。React Native、Weex与Flutter作为主流混合开发框架各具特色。React Native依托Facebook的强大支持,以接近原生的性能和丰富的组件库著称;Weex由阿里巴巴开发,性能优越尤其在大数据处理上表现突出;Flutter则凭借Google的支持及独特的Dart语言和Skia渲染引擎,提供出色的定制能力和开发效率。选择时需考量项目特性、团队技能及生态系统的成熟度。希望本文对比能助你做出最佳决策。
122 1
下一篇
无影云桌面