macOS上搭建Flutter开发环境及真机调试

获取Flutter SDK

  1. 去flutter官网下载其最新可用的安装包,转到下载页

    注意,Flutter的渠道版本会不停变动,请以Flutter官网为准。另外,在中国大陆地区,要想正常获取安装包列表或下载安装包,可能需要翻墙,读者也可以去Flutter github项目下去下载安装包,转到下载页

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

    cd ~/Users/nav/wanglh/flutteSdk
    unzip ~/Users/nav/wanglh/flutteSdk/flutter_macos_v1.9.1+hotfix.5-stable.zip
    

即将压缩包解压到flutteSdk目录下。


image.png

更新环境变量

vim编辑bash_profile文件:

  1. 确定您Flutter SDK的目录,您将在步骤3中用到。
  2. 打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.
  3. 添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径:
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH=PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin:$PATH

注意:PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径,比如我的目录路径是:“~/Users/nav/wanglh/flutteSdk/”

 export PATH=~/Users/nav/wanglh/flutteSdk/flutter/bin:$PATH

效果如下:


image.png

运行 flutter doctor

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

flutter doctor

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

例如:


image.png

一般的错误会是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=https://pub.flutter-io.cn
  export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

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

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

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

检查flutter配置是否成功

flutter -h

如果你能看到如下页面,就代表成功了


image.png

image.png

平台设置

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

iOS 设置

安装 Xcode

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

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

  2. 配置Xcode命令行工具以使用新安装的Xcode版本 sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer 对于大多数情况,当您想要使用最新版本的Xcode时,这是正确的路径。如果您需要使用不同的版本,请指定相应路径。

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

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

设置iOS模拟器

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

  1. 在Mac上,通过Spotlight或使用以下命令找到模拟器:

    open -a Simulator
    
    
  2. 通过检查模拟器 硬件>设备 菜单中的设置,确保您的模拟器正在使用64位设备(iPhone 5s或更高版本).

  3. 根据您的开发机器的屏幕大小,模拟的高清屏iOS设备可能会使您的屏幕溢出。在模拟器的 Window> Scale 菜单下设置设备比例

  4. 运行 flutter run启动您的应用.

安装到iOS设备

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

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

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

    brew update
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller ios-deploy cocoapods
    pod setup
    
    

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

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

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

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

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

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


        Xcode account add

        任何Apple ID都支持开发和测试。需要注册Apple开发者计划才能将您的应用分发到App Store. 查看differences between Apple membership types.

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

        Trust Mac

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

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

      Check the app's Bundle ID
  2. 运行启动您的应用程序 flutter run.

Android设置

安装Android Studio

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

Flutter需要安装和配置Android Studio:

  1. 下载并安装 Android Studio.

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

设置您的Android设备

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

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

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

设置Android模拟器

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

  1. 在您的机器上启用 VM acceleration .

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

  3. 选择一个设备并选择 Next

  4. 为要模拟的Android版本选择一个或多个系统映像,然后选择 Next. 建议使用 x86x86_64 image .

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

  6. 验证AVD配置是否正确,然后选择 Finish

    有关上述步骤的详细信息,请参阅 Managing AVDs.

  7. 在 Android Virtual Device Manager中, 点击工具栏的 Run。模拟器启动并显示所选操作系统版本或设备的启动画面.

  8. 运行 flutter run 启动您的设备. 连接的设备名是 Android SDK built for <platform>,其中 platform 是芯片系列, 如 x86.

创建你的flutter应用

flutter create myflutter

注意:项目名的要求:

image.png

运行你的flutter项目

cd myflutter
flutter run

注意:首次使用命名进行运行flutter时,会报错:

image.png

原因是没有设备可以运行(包含模拟器和真机),先调出模拟器,在Mac上,通过Spotlight或使用以下命令找到模拟器:
open -a Simulator

模拟器打开后,二次运行,并体验热加载模式(press 'r')

flutter run
image.png

项目运行:

image.png

参考:
https://flutter.dev/docs/get-started/install
https://flutterchina.club/setup-macos/#运行-flutter-doctor

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