macOS上搭建Flutter开发环境

落日映苍穹つ 2022-04-11 02:03 520阅读 0赞

前提：有梯子

1.安装Android Studio和配置Android SDK

SDK安装目录 /Users/yiming/Library/Android/sdk

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 1

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 2

2.安装flutterSDK

下载地址：https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos

下载后解压到个人目录下 ~/git/flutter

3.将flutter添加到环境变量

进入flutter目录

  1. yimings-iMac:flutter yiming$ export PATH=`pwd`/bin:$PATH

4.检查flutter配置

运行fluuter doctor

  1. yimings-iMac:flutter yiming$ flutter doctor
  2.   ╔════════════════════════════════════════════════════════════════════════════╗
  3.   ║ A new version of Flutter is available!                                     ║
  4.   ║                                                                            ║
  5.   ║ To update to the latest version, run "flutter upgrade".                    ║
  6.   ╚════════════════════════════════════════════════════════════════════════════╝
  9. Doctor summary (to see all details, run flutter doctor -v):
  10. [✓] Flutter (Channel beta, v0.11.12, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
  11. [✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
  12. [!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
  13.     ✗ libimobiledevice and ideviceinstaller are not installed. To install with Brew, run:
  14.         brew update
  15.         brew install --HEAD usbmuxd
  16.         brew link usbmuxd
  17.         brew install --HEAD libimobiledevice
  18.         brew install ideviceinstaller
  19.     ✗ ios-deploy not installed. To install with Brew:
  20.         brew install ios-deploy
  21.     ! CocoaPods out of date (1.5.0 is recommended).
  22.         CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your
  23.         plugin usage on the Dart side.
  24.         Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
  25.         For more info, see https://flutter.io/platform-plugins
  26.       To upgrade:
  27.         brew upgrade cocoapods
  28.         pod setup
  29. [✓] Android Studio (version 3.0)
  30.     ✗ Flutter plugin not installed; this adds Flutter specific functionality.
  31.     ✗ Dart plugin not installed; this adds Dart specific functionality.
  32. [!] VS Code (version 1.29.1)
  33. [!] Connected device
  34.     ! No devices available
  36. ! Doctor found issues in 3 categories.

打勾的表示环境配置OK，打叉的需要配置

安装提示可以完成iOS toolchain的配置；

感叹号提示CocoaPods out of date更新时提示cocoapods没有安装，安装完成cocoapods后是1.5.3版本，然后在pod setup，flutter推荐安装1.5.0版本，实际上1.5.3可以用

  1. yimings-iMac:flutter yiming$ brew upgrade cocoapods
  2. Updating Homebrew...
  3. Error: cocoapods not installed
  4. yimings-iMac:flutter yiming$ brew install cocoapods
  5. Updating Homebrew...
  6. ==> Downloading https://homebrew.bintray.com/bottles/cocoapods-1.5.3.high_sierra.bottle.tar.gz
  7. ######################################################################## 100.0%
  8. ==> Pouring cocoapods-1.5.3.high_sierra.bottle.tar.gz
  9. Error: The `brew link` step did not complete successfully
  10. The formula built, but is not symlinked into /usr/local
  11. Could not symlink bin/pod
  12. Target /usr/local/bin/pod
  13. already exists. You may want to remove it:
  14.   rm '/usr/local/bin/pod'
  16. To force the link and overwrite all conflicting files:
  17.   brew link --overwrite cocoapods
  19. To list all files that would be deleted:
  20.   brew link --overwrite --dry-run cocoapods
  22. Possible conflicting files are:
  23. /usr/local/bin/pod
  24. ==> Summary
  25. ?  /usr/local/Cellar/cocoapods/1.5.3: 8,923 files, 13.2MB
  26. yimings-iMac:flutter yiming$ brew upgrade cocoapods
  27. Error: cocoapods 1.5.3 already installed
  28. yimings-iMac:flutter yiming$ pod setup
  29. Setting up CocoaPods master repo
  30.   $ /usr/bin/git -C /Users/yiming/.cocoapods/repos/master fetch origin --progress
  31.   remote: Enumerating objects: 1888, done.        
  32.   remote: Counting objects: 100% (1888/1888), done.        
  33.   remote: Compressing objects: 100% (144/144), done.        
  34.   remote: Total 3810 (delta 1746), reused 1841 (delta 1732), pack-reused 1922        
  35.   Receiving objects: 100% (3810/3810), 432.41 KiB | 392.00 KiB/s, done.
  36.   Resolving deltas: 100% (2530/2530), completed with 699 local objects.
  37.   From https://github.com/CocoaPods/Specs
  38.      1fa835d6df5..cd1ff39e34a  master     -> origin/master
  39.   $ /usr/bin/git -C /Users/yiming/.cocoapods/repos/master rev-parse --abbrev-ref HEAD
  40.   master
  41.   $ /usr/bin/git -C /Users/yiming/.cocoapods/repos/master reset --hard origin/master
  42.   warning: unable to access '/Users/yiming/.config/git/attributes': Permission denied
  43.   HEAD is now at cd1ff39e34a [Add] MGReachability 0.0.1
  44. warning: unable to access '/Users/yiming/.config/git/attributes': Permission denied
  46. CocoaPods 1.6.0.beta.2 is available.
  47. To update use: `sudo gem install cocoapods --pre`
  48. [!] This is a test version we'd love you to try.
  50. For more information, see https://blog.cocoapods.org and the CHANGELOG for this version at https://github.com/CocoaPods/CocoaPods/releases/tag/1.6.0.beta.2
  52. Setup completed

Android Studio有两个错误提示，打开打开android studio, 打开plugin，搜索fllutter,点击中间的 Search in repositories安装后重启，Android Studio。

连接安卓手机，打开USB调试，允许电脑安装软件

再次运行flutter doctor，显示设备已连接

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 3

5.创建项目

打开VScode，点击查看>命令面板，输入flutter，选择new project，输入项目名称，例如hello，选择项目目录，创建完成后

6.项目运行

在终端进入项目目录，运行flluter run,也可以在VScode中运行

报错：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 4

打开主目录下~的.bash_profile文件，配置安卓SDK的位置：

  1. export PATH="~/git/flutter/bin:$PATH"
  3. # Android SDK位置
  4. export ANDROID_HOME=~/Library/Android/sdk
  5. export PATH=${PATH}:${ANDROID_HOME}/tools
  6. export PATH=${PATH}:${ANDROID_HOME}/platform-toolsΩ

再次运行flluer报错：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 5

开全局翻墙即可。

若连接上了安卓手机则回自动在手机上安装app并弹出。

也可以在Android Studio中心选择苹果手机模拟器运行

20181204104034537.png

点击运行就可以跑起来了

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 6

也可以直接在VScode里面调用模拟器，打开命令面板输入Launch Emulator，选择ios emulator

发表评论

表情：
评论列表 （有 0 条评论，520人围观）

还没有评论，来说两句吧...

相关阅读