Flutter 环境配置与问题详解

系统要求

  • 有能访问外网的 VPN
  • macOS 64bit
  • Xcode 或者 Android Studio,或者两者都有
  • 命令行工具:bash, mkdir, rm, git, curl, unzip

下载SDK

  1. 下载最新的 flutter SDK 列表
  2. 把压缩包放到你喜欢的地方,比如,Documents 目录下
  3. 双击解压缩,或通过命令: unzip ~/Documents/下载下来的包-beta.zip

添加 flutter 命令

解压缩后,不要急着进入 flutter 文件夹,还停留在 Documents 目录下(或者执行 cd ~/Documents 切到这个目录),为了避免: command not found: flutter 也就是能在任意一个窗口和路径下执行 flutter 命令,可以在 .zshrc 或者 .bash_profile 或者 /.bashrc 文件里添加如下命令:

$ export PATH=$PATH:/PATH_TO_FLUTTER_GIT_DIRECTORY/flutter/bin

如果你是按照上面说的放在 Documents 下 那么 PATH_TO_FLUTTER_GIT_DIRECTORY 就是 Documents 的路径

检查环境依赖

新建新的命令窗口,执行下面命令来检测本机环境依赖

$ flutter doctor

输出如下:

[✓] Flutter (Channel beta, v0.11.3, on Mac OS X 10.14 18A391, 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.io/setup/#android-setup for detailed instructions).
      If 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 9.4.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 with Brew:
        brew install ios-deploy
[!] Android Studio (not installed)
[✓] VS Code (version 1.29.0)
[✓] Connected device (2 available)

显示叉号 的,表示相应的工具没有安装。其中比较重要的两大开发工具是:XcodeAndroid Statudio

如果这两个没有安装,需要根据你的开发者身份,安装对应的开发工具

部署 iOS 环境

  1. 首先需要安装 Xcode,最好是最新版本的
  2. 启动 Xcode,同意它的 license 等(适用于新装Xcode)
  3. Xcode command-line 指定要使用的 Xcode 版本:
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
  1. 选择 iPhone 5s 或之后版本的模拟器,然后执行:
$ open -a Simulator
  1. 再执行下面的部署命令:
$ brew update
$ brew install --HEAD usbmuxd
$ brew link usbmuxd
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy cocoapods
$ pod setup

运行 Flutter 项目

进入某个 flutter 项目目录

$ cd ~/Documents/flutter/examples/hello_world

执行命令,安装 hello_world 到模拟器:

$ flutter run

运行一会后,模拟器已经安装了hello_world,但并没有launch。也许会报错:

ProcessException: Process "/usr/bin/xcrun" exited abnormally:
"io.flutter.examples.hello-world": -1

An error was encountered processing the command (domain=FBSOpenApplicationServiceErrorDomain, code=1):
The request to open ""io.flutter.examples.hello-world"" failed.
The request was denied by service delegate (SBMainWorkspace) for reason: NotFound ("Application ""io.flutter.examples.hello-world"" is
unknown to FrontBoard").
Underlying error (domain=FBSOpenApplicationErrorDomain, code=4):
    The operation couldn’t be completed. Application ""io.flutter.examples.hello-world"" is unknown to FrontBoard.
    Application ""io.flutter.examples.hello-world"" is unknown to FrontBoard.
  Command: /usr/bin/xcrun simctl launch 4B7B9269-47FA-47B6-8096-17AB675A3E4F "io.flutter.examples.hello-world" --enable-dart-profiling
  --enable-checked-mode --observatory-port=0
Error launching application on iPhone 5s.

这里暴露出了 flutter 的另一个问题:

根据 $(PRODUCT_BUNDLE_IDENTIFIER) 不能成功的launch 模拟器

解决方法是:

  • Xcode打开 hello-world 项目
  • 找到 info.plist
  • 修改 Bundle identifier 的值为 io.flutter.examples.hello-world

再次执行 flutter run. 模拟器成功 launch.

部署 Android

  1. 下载安装 Android Studio.
  2. 启动 Android Studio,执行 “Android Studio Setup Wizard”
  3. 安卓设备启用 Developer optionsUSB debugging. 这个文档有详细说明 Android documentation
  4. 把设备连接到电脑,执行命令 flutter devices
  5. 启动应用程序 flutter run

Android 模拟器

  1. 启用 VM acceleration .

  2. Launch Android Studio ->Tools -> Android -> AVD Manager 并选择 Create Virtual Device.

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

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

  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 <x86or其他型号>

至此,Flutter 的环境部署就结束了。

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

推荐阅读更多精彩内容