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

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


相关文章
|
2月前
|
Android开发 iOS开发 容器
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
鸿蒙harmonyos next flutter混合开发之开发FFI plugin
|
1月前
|
开发框架 Dart 前端开发
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。
Flutter 是谷歌推出的一款高效跨平台移动应用开发框架,使用 Dart 语言,具备快速开发、跨平台支持、高性能、热重载及美观界面等特点。本文从 Flutter 简介、特点、开发环境搭建、应用架构、组件详解、路由管理、状态管理、与原生代码交互、性能优化、应用发布与部署及未来趋势等方面,全面解析 Flutter 技术,助你掌握这一前沿开发工具。
61 8
|
1月前
|
前端开发 数据处理 Android开发
Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍
本文深入探讨了Flutter前端开发中的调试技巧与工具使用方法,涵盖调试的重要性、基本技巧如打印日志与断点调试、常用调试工具如Android Studio/VS Code调试器和Flutter Inspector的介绍,以及具体操作步骤、常见问题解决、高级调试技巧、团队协作中的调试应用和未来发展趋势,旨在帮助开发者提高调试效率,提升应用质量。
53 8
|
1月前
|
存储 JavaScript 前端开发
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战
在Flutter开发中,状态管理至关重要。随着应用复杂度的提升,有效管理状态成为挑战。本文介绍了几种常用的状态管理框架,如Provider和Redux,分析了它们的基本原理、优缺点及适用场景,并提供了选择框架的建议和使用实例,旨在帮助开发者提高开发效率和应用性能。
37 4
|
1月前
|
传感器 前端开发 Android开发
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求
在 Flutter 开发中,插件开发与集成至关重要,它能扩展应用功能,满足复杂业务需求。本文深入探讨了插件开发的基本概念、流程、集成方法、常见类型及开发实例,如相机插件的开发步骤,同时强调了版本兼容性、性能优化等注意事项,并展望了插件开发的未来趋势。
42 2
|
2月前
|
开发者
鸿蒙Flutter实战:07-混合开发
鸿蒙Flutter混合开发支持两种模式:1) 基于har包,便于主项目开发者无需关心Flutter细节,但不支持热重载;2) 基于源码依赖,利于代码维护与热重载,需配置Flutter环境。项目结构包括AppScope、flutter_module等目录,适用于不同开发需求。
114 3
|
1月前
|
传感器 开发框架 物联网
鸿蒙next选择 Flutter 开发跨平台应用的原因
鸿蒙(HarmonyOS)是华为推出的一款旨在实现多设备无缝连接的操作系统。为了实现这一目标,鸿蒙选择了 Flutter 作为主要的跨平台应用开发框架。Flutter 的跨平台能力、高性能、丰富的生态支持和与鸿蒙系统的良好兼容性,使其成为理想的选择。通过 Flutter,开发者可以高效地构建和部署多平台应用,推动鸿蒙生态的快速发展。
255 0
|
1月前
|
Dart 安全 UED
Flutter&鸿蒙next中的表单封装:提升开发效率与用户体验
在移动应用开发中,表单是用户与应用交互的重要界面。本文介绍了如何在Flutter中封装表单,以提升开发效率和用户体验。通过代码复用、集中管理和一致性的优势,封装表单组件可以简化开发流程。文章详细讲解了Flutter表单的基础、封装方法和表单验证技巧,帮助开发者构建健壮且用户友好的应用。
84 0
|
2月前
|
开发框架 移动开发 Android开发
安卓与iOS开发中的跨平台解决方案:Flutter入门
【9月更文挑战第30天】在移动应用开发的广阔舞台上,安卓和iOS两大操作系统各自占据半壁江山。开发者们常常面临着选择:是专注于单一平台深耕细作,还是寻找一种能够横跨两大系统的开发方案?Flutter,作为一种新兴的跨平台UI工具包,正以其现代、响应式的特点赢得开发者的青睐。本文将带你一探究竟,从Flutter的基础概念到实战应用,深入浅出地介绍这一技术的魅力所在。
96 7
|
2月前
|
编解码 Dart API
鸿蒙Flutter实战:06-使用ArkTs开发Flutter鸿蒙插件
本文介绍了如何开发一个 Flutter 鸿蒙插件,实现 Flutter 与鸿蒙的混合开发及双端消息通信。通过定义 `MethodChannel` 实现 Flutter 侧的 token 存取方法,并在鸿蒙侧编写 `EntryAbility` 和 `ForestPlugin`,使用鸿蒙的首选项 API 完成数据的读写操作。文章还提供了注意事项和参考资料,帮助开发者更好地理解和实现这一过程。
123 0