flutter填坑之旅(環境搭建篇--mac系統)


上次配置過Mac到flutter環境,但是由於最近系統更新了,什么都沒了又得從新配置,發現自己竟然好多都忘記了,看來還是得把它記下來才行

在Mac上安裝並運行Flutter 最低要求:

  • 操作系統:macOS(64-bit)
  • 磁盤空間:700MB(不包括Xcode或者Android Studio的磁盤空間)
  • 工具:Flutter 依賴 這些命令行工具bash curl git 2.x mkdir rm unzip which (可以使用檢測一下沒有都安裝上免得后期出問題)
    mac安裝git可以參考https://www.jianshu.com/p/7edb6b838a2e

一、設置 Flutter 鏡像

配置flutter國內鏡像

// 直接到用戶目錄 下 運行 open -e .bash_profile 在文件中增加如下
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

注意這個鏡像地址不能保證永遠可以用,得隨時關注Useing Flutter in China這個官網

二、獲取Flutter SDK

2.1 下載flutter sdk

flutter官網獲取對應得flutter sdk https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
在這里插入圖片描述
推薦最好下載 stable channel這個穩定版本
在這里插入圖片描述

2.2 解壓

## development 這個根據自己實際得目錄更改
$ cd ~/development
## 下面~/ 后得目錄和下載得flutter版本根據自己實際名稱更改
$ unzip ~/Downloads/flutter_macos_v1.2.1-stable.zip

具體操作:


taodeMacBook-Pro:~ tao$ cd ~/dev-flutter/
taodeMacBook-Pro:dev-flutter tao$ ls
android-sdk
taodeMacBook-Pro:dev-flutter tao$ unzip ~/Downloads/flutter_macos_v1.7.8+hotfix.4-stable.zip 
taodeMacBook-Pro:dev-flutter tao$ ls
android-sdk	flutter
taodeMacBook-Pro:dev-flutter tao$ 
taodeMacBook-Pro:dev-flutter tao$ ls flutter/
AUTHORS			README.md		examples
CODE_OF_CONDUCT.md	analysis_options.yaml	flutter_console.bat
CONTRIBUTING.md		bin			flutter_root.iml
LICENSE			dartdoc_options.yaml	packages
PATENTS			dev			version
taodeMacBook-Pro:dev-flutter tao$ 

2.3 添加flutter相關工具到path中
 export PATH="$PATH:`pwd`/flutter/bin"

該命令只是一次性的,對當前對terminal 設置里一個flutter的環境變量,等關閉里電腦下次又得重新設置,想要設置個永久性的還是要
將解壓得路徑配置到.bash_profile中去

輸入命令打開.bash_profile


taodeMacBook-Pro:dev-flutter tao$ open ~/.bash_profile
taodeMacBook-Pro:dev-flutter tao$ 

在最后增加如下內容:


export PATH=/Users/tao/dev-flutter/flutter/bin:$PATH
export ANDROID_HOME="/Users/tao/Library/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.cnexport PATH="/usr/local/opt/gettext/bin:$PATH"

其中export PATH=/Users/tao/dev-flutter/flutter/bin:$PATH 這個是配置的flutter
解壓的目錄(需要指定到flutter下面到bin目錄下)
其中export ANDROID_HOME="/Users/tao/Library/Android/sdk"配置里Android sdk 路徑

taodeMacBook-Pro:dev-flutter tao$ flutter doctor
  ╔════════════════════════════════════════════════════════════════════════════╗
  ║ A new version of Flutter is available!                                     ║
  ║                                                                            ║
  ║ To update to the latest version, run "flutter upgrade".                    ║
  ╚════════════════════════════════════════════════════════════════════════════╝


Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.15 19A602, locale
    zh-Hans-CN)
    ✗ Downloaded executables cannot execute on host.
      See https://github.com/flutter/flutter/issues/6207 for more information

 
[] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.1)
    ✗ CocoaPods not installed.
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To install:
        brew install cocoapods
        pod setup
[] iOS tools - develop for iOS devices
[] Android Studio (version 3.5)
[] IntelliJ IDEA Ultimate Edition (version 2018.3.4)
[!] Connected device
    ! No devices available

! Doctor found issues in 3 categories.
taodeMacBook-Pro:dev-flutter tao$ 

運行flutter doctor 進行環境檢測,會發現用很多依賴缺失,根據提示一一安裝
但是還有一個提示我的mac和我下載的flutter好像不兼容

Doctor summary (to see all details, run flutter doctor -v):
[!] Flutter (Channel stable, v1.7.8+hotfix.4, on Mac OS X 10.15 19A602, locale
    zh-Hans-CN)
    ✗ Downloaded executables cannot execute on host.
      See https://github.com/flutter/flutter/issues/6207 for more information

直接運行flutter upgrade 安裝個最新版本的就好了


taodeMacBook-Pro:dev-flutter tao$ flutter upgrade
Upgrading Flutter from /Users/tao/dev-flutter/flutter...
../../third_party/dart/runtime/bin/snapshot_utils.cc: 149: error: Failed to memory map snapshot: /Users/tao/dev-flutter/flutter/bin/cache/dart-sdk/bin/snapshots/kernel-service.dart.snapshot

version=2.4.0 (Wed Jun 19 11:53:45 2019 +0200) on "macos_x64"
thread=5891, isolate=(null)(0x0)

注意⚠️命令中請使用 sudo 否則有些會提示錯誤
像這個 執行個flutter doctor都報錯

taodeMacBook-Pro:repos tao$ flutter doctor
Failed to write the version file to the artifact cache: "FileSystemException: Cannot open file, path = '/Users/tao/dev-flutter/flutter/version' (OS Error: Permission denied, errno = 13)".
Please ensure you have permissions in the artifact cache directory.
Failed to write the version file

廢話少說繼續吧…

## 在執行一次
taodeMacBook-Pro:dev-flutter tao$ sudo flutter doctor -v
   Woah! You appear to be trying to run flutter as root.
   We strongly recommend running the flutter tool without superuser privileges.
  /
📎
Downloading Dart SDK from Flutter engine d004bcd4d619fc3574761d63d7cf7b7291332c79...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  121M  100  121M    0     0  4763k      0  0:00:26  0:00:26 --:--:-- 3986k
## 這里還會有很多下載,就不貼了
## 最后會顯示flutter及dart 版本信息和缺失的依賴
taodeMacBook-Pro:dev-flutter tao$ sudo flutter doctor
Password:
   Woah! You appear to be trying to run flutter as root.
   We strongly recommend running the flutter tool without superuser privileges.
  /
📎
Downloading Dart SDK from Flutter engine b863200c37df4ed378042de11c4e9ff34e4e58c9...
  % Total    % Received % Xferd  Average Speed   Time    Time     Time  Current
                                 Dload  Upload   Total   Spent    Left  Speed
100  263M  100  263M    0     0  5236k      0  0:00:51  0:00:51 --:--:-- 5379k
Building flutter tool...
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.9.1+hotfix.6, on Mac OS X 10.15 19A602, locale
    zh-Hans-CN)
 
[] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[!] Xcode - develop for iOS and macOS (Xcode 11.1)
    ✗ CocoaPods installed but not working.
        You appear to have CocoaPods installed but it is not working.
        This can happen if the version of Ruby that CocoaPods was installed with
        is different from the one being used to invoke it.
        This can usually be fixed by re-installing CocoaPods. For more info, see
        https://github.com/flutter/flutter/issues/14293.
      To re-install CocoaPods, run:
        sudo gem install cocoapods
[] Android Studio (version 3.5)
[] IntelliJ IDEA Ultimate Edition (version 2018.3.4)
[!] Connected device
    ! No devices available

! Doctor found issues in 2 categories.

看提示好像還差一個cocoapods 再手工裝一個

注意⚠️Mac 中文件查找使用 which directoryName 而不建議使用 find ~/ -name 'directoryName'


sudo gem install cocoapods

但是會發現執行了如上命令幾次依然提示通用錯誤,解決方法是


taodeMacBook-Pro:dev-flutter tao$ cd ~/.cocoapods/repos
taodeMacBook-Pro:repos tao$ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
fatal: 目標路徑 'master' 已經存在,並且不是一個空目錄。
taodeMacBook-Pro:repos tao$ ls
master
taodeMacBook-Pro:repos tao$ rm -rf master/


taodeMacBook-Pro:repos tao$ 
taodeMacBook-Pro:repos tao$ 
taodeMacBook-Pro:repos tao$ git clone https://mirrors.tuna.tsinghua.edu.cn/git/CocoaPods/Specs.git master
正克隆到 'master'...

手動刪除老版本,克隆新版本
這個方法最后證實是失敗的…


 brew reinstall libimobiledevice
 brew install --HEAD libimobiledevice
 brew upgrade cocoapods
 

全部都又執行了一次,最后依然報錯麻麻但,不曉得咋搞,ruby我東重新裝過了
最后我去官網從新下載了個flutter_macos_v1.9.1+hotfix.5-stable.zip
在這里插入圖片描述
然后解壓測試👌了媽蛋垃圾問題(推測是Mac版本兼容問題,出錯都版本是10.14.1 而目前最新都版本為10.15.1)


taodeMacBook-Pro:dev-flutter tao$ unzip ~/Downloads/flutter_macos_v1.9.1+hotfix.5-stable.zip 
taodeMacBook-Pro:dev-flutter tao$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[] Flutter (Channel stable, v1.9.1+hotfix.5, on Mac OS X 10.15.1 19B88, locale zh-Hans-CN)
 
[] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
[] Xcode - develop for iOS and macOS (Xcode 11.1)
[] Android Studio (version 3.5)
[] IntelliJ IDEA Ultimate Edition (version 2018.3.4)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

還有輸入flutter doctor 會提示
在這里插入圖片描述
這個千萬別點擊 移到廢紙簍;那樣flutter運行就會出問題了

三、IOS開發環境設置

3.1 Xcode 安裝

1、直接去Apple store 下載 對應得Xcode 然后安裝這個沒有什么說的
在這里插入圖片描述
點擊下載得圖標
在這里插入圖片描述
在啟動台里得右下角你會看見一個正在下載得xcode
在這里插入圖片描述
安裝完成再安裝些必須的組件
在這里插入圖片描述

2、配置Xcode 命令行工具以使用新安裝得Xcode版本


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

注意/Applications/Xcode.app/Contents/Developer 對應得是自己得Xcode 得安裝路徑

3、 打開Xcode 許可協議,執行如下命令


$ sudo xcodebuild -license

3.2 設置iOS 模擬器

使用命令開啟iOS模擬器


$ sudo open -a Simulator

四、Android開發環境設置

官網下載 android studio :https://developer.android.google.cn/studio)
在這里插入圖片描述
在這里插入圖片描述
下載完成直接點着左邊得Android Studio 拖到右邊得Applications文件里去,他就會提示你安裝了
在這里插入圖片描述
接下來就是下一步下一步直到安裝結束
在這里插入圖片描述
安裝完成后記得配置安裝dart和flutter 插件

配置dart
配置dart

五、新建項目

控制台執行 flutter create proj_name


taodeMacBook-Pro:flutter-project tao$ flutter create my_first_app_test
  my_first_app_test/.idea/workspace.xml (created)
Running "flutter pub get" in my_first_app_test...                   3.1s
Wrote 65 files.

All done!
[] Flutter is fully installed. (Channel stable, v1.9.1+hotfix.5, on Mac OS X
    10.15.1 19B88, locale zh-Hans-CN)
[] Android toolchain - develop for Android devices is fully installed. (Android
    SDK version 29.0.2)
[] Xcode - develop for iOS and macOS is fully installed. (Xcode 11.1)
[] Android Studio is fully installed. (version 3.5)
[] IntelliJ IDEA Ultimate Edition is fully installed. (version 2018.3.4)
[!] Connected device is not available.

Run "flutter doctor" for information about installing additional components.

In order to run your application, type:

  $ cd my_first_app_test
  $ flutter run

Your application code is in my_first_app_test/lib/main.dart.

然后flutter run直接來跑一哈

## 啟動iOS模擬器
taodeMacBook-Pro:flutter-project tao$ open -a Simulator
taodeMacBook-Pro:flutter-project tao$ ls
my_app			my_first_app		my_first_app_test
taodeMacBook-Pro:flutter-project tao$ cd my_first_app_test/
taodeMacBook-Pro:my_first_app_test tao$ flutter run

在這里插入圖片描述


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM