两分钟带你快速搭建Flutter开发环境(Mac)

两分钟带你快速搭建Flutter开发环境(Mac)

为大家倾力打造的课程《Flutter从入门到进阶-实战携程网App》上线了,解锁Flutter开发新姿势,一网打尽Flutter核心技术 点我Get!!!

在这篇文章中,将带着大家一起在Mac平台上快速搭建Flutter的开发环境同时会将搭建Flutter开发环境中的一些技巧和经验分享给大家。

  • 在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助;

目录


  • 系统要求
  • 设置FLutter镜像(非必须)
  • 获取Flutter SDK
  • iOS开发环境设置
  • Android开发环境设置
  • 安装Flutter插件

系统要求

在Mac上要安装并运行Flutter要满足以下最低要求:

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

设置FLutter镜像(非必须)

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

//Macintosh HD⁩  ⁨Users⁩  ⁨你的用户名  ⁨.bash_profile
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意:此镜像为临时镜像,并不能保证一直可用,大家可以从 Using Flutter in China 上获得有关镜像服务器的最新动态。

获取Flutter SDK

1.点Flutter官网下载其最新可用的安装包。

2.解压安装包到你想安装的目录,如:

$ cd ~/development
$ unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip

3.添加flutter相关工具到path中:

 export PATH="$PATH:`pwd`/flutter/bin"

此代码只能暂时针对当前命令行窗口设置PATH环境变量,要想永久将Flutter添加到PATH中请参考下面做法:

$ cd ~
$ vim .bash_profile

然后添加:

export PATH=/Users/jph/Documents/flutter/bin:$PATH

之后记得保存文件。

运行 flutter doctor

上面path配置完成之后,需要关闭终端重新打开,然后运行:

$ 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 https://goo.gl/XxQghQ
    • Try re-installing or updating your Android SDK,
      visit https://flutter.dev/setup/#android-setup for detailed instructions.

一般的错误会是XCode或Android Studio版本太低、或者没有ANDROID_HOME环境变量等,可参考一下环境变量的配置来检查你的环境变量:

//Macintosh HD⁩  ⁨Users⁩  ⁨你的用户名  ⁨.bash_profile
#Android 环境变量
export ANDROID_HOME=/Users/你的用户名/Library/Android/sdk
#Android 模拟器路径
export PATH=${PATH}:${ANDROID_HOME}/emulator
#Android tools 路径
export PATH=${PATH}:${ANDROID_HOME}/tools
#Android 平台工具路径
export PATH=${PATH}:${ANDROID_HOME}/platform-tools
#Android NDK路径
ANDROID_NDK_HOME=/Users/你的用户名/Library/Android/ndk/android-ndk-r10e
#FLutter镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
#Flutter环境变量
export PATH=/Users/jph/Documents/flutter/bin:$PATH

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

iOS开发环境设置

安装 Xcode

要用Flutter开发iOS App需要Xcode 9.0 或更高版本:

1.安装Xcode 9.0或更新版本(通过链接下载苹果应用商店)

2.配置Xcode命令行工具以使用新安装的Xcode版本 s

$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

以上路径时对于最新版Xcode的路径。如果你需要使用不同的Xcode版本,需要指定相应路径。

3.确保Xcode许可协议是通过打开一次Xcode或通过命令sudo xcodebuild -license同意过了

接下来就可以使用Xcode,在iOS设备或模拟器上运行Flutter App了。

设置iOS模拟器

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

1.在终端输入如下命令打开一个iOS模拟器:

$ open -a Simulator

2.通过模拟器菜单栏的 硬件>设备 ,确保你打开是64位 iPhone 5s或更新的模拟器

3.如果模拟器过大,可以通过模拟器的 Window> Scale 菜单下设置设备比例

创建和运行一个简单的Flutter项目

1.通过如下命令创建一个Flutter项目

$ flutter create my_app

2.命令运行完成之后会在当前目录下创建一个名为my_app的Flutter项目,然后通过一下命令可以运行它:

$ cd my_app
$ flutter run

如何将Flutter安装到iOS真机上?

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

当然,用XCode来将Flutter运行在真机上更简单,只需要点一下run按钮即可,可以根据需要进行选择这两种不同的运行方式;

1.安装 Homebrew (如果已经安装了brew,跳过此步骤).

2.确保homebrew已更新

$ brew update

3.打开终端并运行这些命令来安装用于将Flutter应用安装到iOS设备的工具

$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

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

4.遵循Xcode签名流程来配置您的项目:

  • 在你Flutter项目目录中通过 open ios/Runner.xcworkspace 打开默认的Xcode workspace

  • 在Xcode中,选择导航面板左侧中的Runner项目

  • 在Runner target设置页面中,确保在 常规>签名>团队 下选择了您的开发团队。当您选择一个团队时,Xcode会创建并下载开发证书,向您的设备注册您的帐户,并创建和下载配置文件(如果需要)

    • 要开始您的第一个iOS开发项目,您可能需要使用您的Apple ID登录Xcode


      xcode-account

      任何Apple ID都支持开发和测试,但如果要将应用发布到App Store则需要一个99美刀的开发者账号。

  • 当你第一次attach真机设备进行iOS开发时,需要同时信任你的Mac和该设备上的开发证书。首次将iOS设备连接到Mac时,请在对话框中选择 Trust

    trust-computer

然后,转到iOS设备上的设置应用程序,选择 常规>设备管理 并信任您的证书。

  • 如果Xcode中的自动签名失败,请验证项目的 General > Identity > Bundle Identifier 值是否唯一。

5.通过flutter run运行启动项目

$ flutter run

Android开发环境设置&Flutter插件安装

安装Android Studio

1.下载并安装 Android Studio

因为Android网站设在国外,如果你的网络无法访问第一个地址,可以选择使用Google为中国开发者提供的中国网址进行访问。

另外,关于Android Studio的安装和配置,Android官方有比较详细的说明文档https://developer.android.google.cn/studio/intro,大家可以根据需要进行查阅;

大家在安装过程中遇到问题无法解决的,可以在我们课程的问答区提问进行提问;

2.启动Android Studio,然后执行“Android Studio安装向导”。这将安装最新的Android SDK,Android SDK平台工具和Android SDK构建工具

Flutter插件安装

  • 打开Android Studio
  • 打开Preferences > Plugins (macOS), File > Settings > Plugins (Windows & Linux)
  • 选择 Browse repositories, 搜索 Flutter plugin
  • 然后点击安装,然后安装Dart插件
  • 完成之后选择重启Android Studio

如何在Android模拟器上运行Flutter?

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

  • 在你的机器上启用 VM acceleration

  • 启动 Android Studio>Tools>Android>AVD Manager 并选择 Create Virtual Device

  • 选择一个设备并选择 Next;

  • 为要模拟的Android版本选择一个或多个系统映像,然后选择 Next. 建议使用 x86 或 x86_64 的镜像;

  • 在 Emulated Performance下, 选择 Hardware - GLES 2.0 以启用硬件加速;

  • 验证AVD配置是否正确,然后选择 Finish;

    如果对以上步骤还有不清楚的可以参阅Android官方的 Managing AVDs文档。

    大家在安装过程中遇到问题无法解决的,可以在我们课程的问答区提问进行提问;

  • 在 Android Virtual Device Manager中, 点击工具栏的 Run,模拟器启动并显示所选操作系统版本或设备的启动画面;
  • 通过flutter run运行启动项目;

如何在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的目录。

关于开发环境搭建更多实战技巧与最佳实践可学习《基于Flutter1.x开发携程网App-开发环境搭建》部分的课程。

  • 本节学习过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助;

参考

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容