macOS上搭建Flutter开发环境

落日映苍穹つ 2022-04-11 02:03 375阅读 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][https_flutter.io_docs_development_tools_sdk_archive_tab_macos_macos]

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

3.将flutter添加到环境变量

进入flutter目录

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

4.检查flutter配置

运行fluuter doctor

yimings-iMac:flutter yiming$ 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 beta, v0.11.12, on Mac OS X 10.13.6 17G65, locale zh-Hans-CN)
    [✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    [!] 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
        ! CocoaPods out of date (1.5.0 is recommended).
            CocoaPods is used to retrieve the iOS platform side's plugin code that responds to your
            plugin usage on the Dart side.
            Without resolving iOS dependencies with CocoaPods, plugins will not work on iOS.
            For more info, see https://flutter.io/platform-plugins
          To upgrade:
            brew upgrade cocoapods
            pod setup
    [✓] Android Studio (version 3.0)
        ✗ Flutter plugin not installed; this adds Flutter specific functionality.
        ✗ Dart plugin not installed; this adds Dart specific functionality.
    [!] VS Code (version 1.29.1)
    [!] Connected device
        ! No devices available
    
    ! 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可以用

yimings-iMac:flutter yiming$ brew upgrade cocoapods
    Updating Homebrew...
    Error: cocoapods not installed
    yimings-iMac:flutter yiming$ brew install cocoapods
    Updating Homebrew...
    ==> Downloading https://homebrew.bintray.com/bottles/cocoapods-1.5.3.high_sierra.bottle.tar.gz
    ######################################################################## 100.0%
    ==> Pouring cocoapods-1.5.3.high_sierra.bottle.tar.gz
    Error: The `brew link` step did not complete successfully
    The formula built, but is not symlinked into /usr/local
    Could not symlink bin/pod
    Target /usr/local/bin/pod
    already exists. You may want to remove it:
      rm '/usr/local/bin/pod'
    
    To force the link and overwrite all conflicting files:
      brew link --overwrite cocoapods
    
    To list all files that would be deleted:
      brew link --overwrite --dry-run cocoapods
    
    Possible conflicting files are:
    /usr/local/bin/pod
    ==> Summary
    ?  /usr/local/Cellar/cocoapods/1.5.3: 8,923 files, 13.2MB
    yimings-iMac:flutter yiming$ brew upgrade cocoapods
    Error: cocoapods 1.5.3 already installed
    yimings-iMac:flutter yiming$ pod setup
    Setting up CocoaPods master repo
      $ /usr/bin/git -C /Users/yiming/.cocoapods/repos/master fetch origin --progress
      remote: Enumerating objects: 1888, done.        
      remote: Counting objects: 100% (1888/1888), done.        
      remote: Compressing objects: 100% (144/144), done.        
      remote: Total 3810 (delta 1746), reused 1841 (delta 1732), pack-reused 1922        
      Receiving objects: 100% (3810/3810), 432.41 KiB | 392.00 KiB/s, done.
      Resolving deltas: 100% (2530/2530), completed with 699 local objects.
      From https://github.com/CocoaPods/Specs
         1fa835d6df5..cd1ff39e34a  master     -> origin/master
      $ /usr/bin/git -C /Users/yiming/.cocoapods/repos/master rev-parse --abbrev-ref HEAD
      master
      $ /usr/bin/git -C /Users/yiming/.cocoapods/repos/master reset --hard origin/master
      warning: unable to access '/Users/yiming/.config/git/attributes': Permission denied
      HEAD is now at cd1ff39e34a [Add] MGReachability 0.0.1
    warning: unable to access '/Users/yiming/.config/git/attributes': Permission denied
    
    CocoaPods 1.6.0.beta.2 is available.
    To update use: `sudo gem install cocoapods --pre`
    [!] This is a test version we'd love you to try.
    
    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
    
    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的位置：

export PATH="~/git/flutter/bin:$PATH"
    
    # Android SDK位置
    export ANDROID_HOME=~/Library/Android/sdk
    export PATH=${PATH}:${ANDROID_HOME}/tools
    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**

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70]: /images/20220411/f5209a1897b14565b3d086e208e5950b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 1]: /images/20220411/ca6163ee021441948f78f0842c4c536d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 2]: /images/20220411/f056d9d74847404a82c2500923140897.png
[https_flutter.io_docs_development_tools_sdk_archive_tab_macos_macos]: https://flutter.io/docs/development/tools/sdk/archive?tab=macos#macos
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 3]: /images/20220411/f2db42636250488993c95c4d24015d7c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 4]: /images/20220411/19c75a5ec37346f382d101401839b66b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 5]: /images/20220411/34d2f2c7b7b4456dbb2f982959d8ff0c.png
[20181204104034537.png]: /images/20220411/499eb8846e554e00a197b7dba91c414a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zNjE4NTAyOA_size_16_color_FFFFFF_t_70 6]: /images/20220411/1b978b68b68e48d1a717520b82db77d3.png