龙空技术网

Mac笔记本搭建Flutter开发环境

溜石板码农老聂 1192

前言:

此时小伙伴们对“mac开发vue”大概比较珍视,我们都需要学习一些“mac开发vue”的相关内容。那么小编同时在网上搜集了一些有关“mac开发vue””的相关资讯,希望各位老铁们能喜欢,你们一起来学习一下吧!

今天自己的笔记本系统重新安装了,里面基本什么都没有了,之前开发的Flutter环境也没有了,今天我来安装Flutter开发环境,随便更新一下Flutter开发的环境搭建教程。

有一个好的开发工具少不了,比如程序员拥有一台MAC笔记本是很重要的

今天我要分享的就是一套在MAC笔记本上面安装Flutter开发环境


本头条核心宗旨

欢迎来到「技术刚刚好」作者,「技术刚刚好」是个人维护,每天至少更新一篇Flutter技术文章,实时为大家播报Flutter最新消息。如果你刚好也在关注Flutter这门技术,那就跟我一起学习进步吧,你的赞,收藏,转发是对我个人最大的支持,维护不易,欢迎关注。

技术刚刚好经历

近几年,移动端跨平台开发技术层出不穷,从Facebook家的ReactNative,到阿里家WEEX,前端技术在移动端跨平台开发中大展身手,技术刚刚好作为一名Android开发,经历了从Reactjs到Vuejs的不断学习。而在2018年,我们的主角变成了Flutter,这是Goolge开源的一个移动端跨平台解决方案,可以快速开发精美的移动App。希望跟大家一起学习,一起进步!

本文核心要点

MAC笔记本一台。

安装前大家可以去官网看看:

使用镜像

由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中:

export PUB_HOSTED_URL= FLUTTER_STORAGE_BASE_URL=

注意: 此镜像为临时镜像,并不能保证一直可用,读者可以参考详情请参考 Using Flutter in China 以获得有关镜像服务器的最新动态。

系统要求

要安装并运行Flutter,您的开发环境必须满足以下最低要求:

操作系统: macOS (64-bit)磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间).工具: Flutter 依赖下面这些命令行工具.bash, mkdir, rm, git, curl, unzip, which

首先大家按照上面的要求先把镜像弄下来。

获取Flutter SDK去flutter官网下载其最新可用的安装包,转到下载页 。注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包,转到下载页 。解压安装包到你想安装的目录,如:cd ~/development unzip ~/Downloads/flutter_macos_v0.5.1-beta.zip添加flutter相关工具到path中:export PATH=`pwd`/flutter/bin:$PATH 此代码只能暂时针对当前命令行窗口设置PATH环境变量,要想永久将Flutter添加到PATH中请参考下面更新环境变量 部分。

注意: 由于一些flutter命令需要联网获取数据,如果您是在国内访问,由于众所周知的原因,直接访问很可能不会成功。 上面的PUB_HOSTED_URL和FLUTTER_STORAGE_BASE_URL是google为国内开发者搭建的临时镜像。详情请参考 Using Flutter in China

要更新现有版本的Flutter,请参阅升级Flutter。

运行 flutter doctor

运行以下命令查看是否需要安装其它依赖项来完成安装:

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了,没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务(以粗体显示)

例如:

[-] Android toolchain - develop for Android devices    • Android SDK at /Users/obiwan/Library/Android/sdk    ✗ Android SDK is missing command line tools; download from     • Try re-installing or updating your Android SDK,      visit  for detailed instructions.

一般的错误会是xcode或Android Studio版本太低、或者没有ANDROID_HOME环境变量等,请按照提示解决。下面贴一个笔者本机(mac)的环境变量配置,您可以对比修正:

  export PATH=/Users/用户名/Documents/flutter/flutter/bin:$PATH  export ANDROID_HOME="/Users/用户名/Documents/android_sdk" //android sdk目录,替换为你自己的即可  export PATH=${PATH}:${ANDROID_HOME}/tools  export PATH=${PATH}:${ANDROID_HOME}/platform-tools  export PUB_HOSTED_URL=  export FLUTTER_STORAGE_BASE_URL=

第一次运行一个flutter命令(如flutter doctor)时,它会下载它自己的依赖项并自行编译。以后再运行就会快得多。

以下各部分介绍如何执行这些任务并完成设置过程。你会看到在flutter doctor输出中, 如果你选择使用IDE,我们提供了,IntelliJ IDEA,Android Studio和VS Code的插件, 请参阅编辑器设置 以了解安装Flutter和Dart插件的步骤。

一旦你安装了任何缺失的依赖,再次运行flutter doctor命令来验证你是否已经正确地设置了。

该flutter工具使用Google Analytics匿名报告功能使用情况统计信息和基本崩溃报告。 这些数据用于帮助改进Flutter工具。Analytics不是一运行或在运行涉及flutter config的任何命令时就发送, 因此您可以在发送任何数据之前退出分析。要禁用报告,请执行flutter config --no-analytics并显示当前设置,然后执行flutter config。 请参阅Google的隐私政策。

更新环境变量

您在命令行只能更新当前会话的PATH变量,如Clone Flutter repo所示。 但是,您可能需要的是永久更新此变量,以便您可以运行flutter命令在任何终端会话中。

对于所有终端会话永久修改此变量的步骤是和特定计算机系统相关的。通常,您会在打开新窗口时将设置环境变量的命令添加到执行的文件中。例如

确定您Flutter SDK的目录,您将在步骤3中用到。打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:

export PUB_HOSTED_URL= //国内用户需要设置export FLUTTER_STORAGE_BASE_URL= //国内用户需要设置export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意:PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径,比如“~/document/code”

 export PATH=~/document/code/flutter/bin:$PATH
运行 source $HOME/.bash_profile 刷新当前终端窗口.

注意: 如果你使用的是zsh,终端启动时 ~/.bash_profile 将不会被加载,解决办法就是修改 ~/.zshrc ,在其中添加:source ~/.bash_profile

5.通过运行flutter/bin命令验证目录是否在已经在PATH中:

echo $PATH

更多详细信息,请参阅this StackExchange question.

编辑器设置

使用 flutter 命令行工具,您可以使用任何编辑器来开发Flutter应用程序。输入flutter help在提示符下查看可用的工具。

我们建议使用我们的插件来获得丰富的IDE体验,支持编辑,运行和调试Flutter应用程序。请参阅编辑器设置了解详细步骤

平台设置

macOS支持为iOS和Android开发Flutter应用程序。现在完成两个平台设置步骤中的至少一个,以便能够构建并运行您的第一个Flutter应用程序

iOS 设置安装 Xcode

要为iOS开发Flutter应用程序,您需要Xcode 7.2或更高版本:

安装Xcode 7.2或更新版本(通过链接下载或苹果应用商店).配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了.

使用Xcode,您可以在iOS设备或模拟器上运行Flutter应用程序。

设置iOS模拟器

要准备在iOS模拟器上运行并测试您的Flutter应用,请按以下步骤操作:

在Mac上,通过Spotlight或使用以下命令找到模拟器:open -a Simulator通过检查模拟器 硬件>设备 菜单中的设置,确保您的模拟器正在使用64位设备(iPhone 5s或更高版本).根据您的开发机器的屏幕大小,模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例运行 flutter run启动您的应用.安装到iOS设备

要将您的Flutter应用安装到iOS真机设备,您需要一些额外的工具和一个Apple帐户,您还需要在Xcode中进行设置。

安装 homebrew (如果已经安装了brew,跳过此步骤).打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具brew update brew install --HEAD libimobiledevice brew install ideviceinstaller ios-deploy cocoapods pod setup

如果这些命令中的任何一个失败并出现错误,请运行brew doctor并按照说明解决问题.

遵循Xcode签名流程来配置您的项目:在你Flutter项目目录中通过 open ios/Runner.xcworkspace 打开默认的Xcode workspace.在Xcode中,选择导航面板左侧中的Runner项目在Runner target设置页面中,确保在 常规>签名>团队 下选择了您的开发团队。当您选择一个团队时,Xcode会创建并下载开发证书,向您的设备注册您的帐户,并创建和下载配置文件(如果需要)要开始您的第一个iOS开发项目,您可能需要使用您的Apple ID登录Xcode.任何Apple ID都支持开发和测试。需要注册Apple开发者计划才能将您的应用分发到App Store. 查看differences between Apple membership types.当您第一次attach真机设备进行iOS开发时,您需要同时信任你的Mac和该设备上的开发证书。首次将iOS设备连接到Mac时,请在对话框中选择 Trust。然后,转到iOS设备上的设置应用程序,选择 常规>设备管理 并信任您的证书。如果Xcode中的自动签名失败,请验证项目的 General > Identity > Bundle Identifier 值是否唯一.运行启动您的应用程序 flutter run.Android设置安装Android Studio

要为Android开发Flutter应用,您可以使用Mac,Windows或Linux(64位)机器.

Flutter需要安装和配置Android Studio:

下载并安装 Android Studio.启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具,这是Flutter为Android开发时所必需的设置您的Android设备

要准备在Android设备上运行并测试您的Flutter应用,您需要安装Android 4.1(API level 16)或更高版本的Android设备.

在您的设备上启用 开发人员选项 和 USB调试 。详细说明可在Android文档中找到。使用USB将手机插入电脑。如果您的设备出现提示,请授权您的计算机访问您的设备。在终端中,运行 flutter devices 命令以验证Flutter识别您连接的Android设备。运行启动您的应用程序 flutter run。

默认情况下,Flutter使用的Android SDK版本是基于你的 adb 工具版本。 如果您想让Flutter使用不同版本的Android SDK,则必须将该 ANDROID_HOME 环境变量设置为SDK安装目录。

设置Android模拟器

要准备在Android模拟器上运行并测试您的Flutter应用,请按照以下步骤操作:

在您的机器上启用 VM acceleration .启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device.选择一个设备并选择 Next。为要模拟的Android版本选择一个或多个系统映像,然后选择 Next. 建议使用 x86 或 x86_64 image .在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用 硬件加速.验证AVD配置是否正确,然后选择 Finish。有关上述步骤的详细信息,请参阅 Managing AVDs.在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

这样基本都可以进行Flutter开发了。

标签: #mac开发vue