Flutter之MacOS系统安装环境

2019-05-15 本文已影响0人枫叶无处漂泊

MacOS系统安装环境

一、下载镜像

由于国内被墙，需要设置下载镜像，终端输入：

export PUB_HOSTED_URL=https://pub.flutter-io.cn
    
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

二、下载flutter包

终端输入：

git clone -b dev https://github.com/flutter/flutter.git

三、设置flutter为全局可执行

只需要终端输入：

export PATH="$PWD/flutter/bin:$PATH"

以上配置命令为当前终端窗口临时设置PATH变量，你会发现系统重新启动后配置的PATH变量丢失。
在终端执行flutter doctor 提示command not found 。

所以我们要将Flutter PATH环境变量永久添加到系统路径中，以便可以运行flutter命令在任何终端会话中。步骤如下：

确定您Flutter SDK的目录，您将在步骤3中用到
打开(或创建) $HOME/.bash_profile. 文件路径和文件名可能在您的机器上不同.(如不太了解.bash_profile的相关操作可以参考 Mac 打开、编辑.bash_profile)
添加以下行并更改[PATH_TO_FLUTTER_GIT_DIRECTORY]为克隆Flutter的git repo的路径

打开.bashprofile文件，并把下面flutter环境配置添加到：

//Flutter sdk 环境变量配置
export PUB_HOSTED_URL=https://pub.flutter-io.cn

export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

// /Users/geek是你fultter sdk的路径
export PATH=/Users/ypf/flutter/bin:$PATH

注意：PATH_TO_FLUTTER_GIT_DIRECTORY 为你flutter的路径，比如“/Users/ypf”

 export PATH=~/Users/ypf/flutter/bin:$PATH

保存好关闭bashprofile文件。

然后运行：

source $HOME/.bash_profile

刷新当前终端窗口。
然后通过运行flutter/bin命令验证目录是否在已经在PATH中:

echo $PATH

这时候就不用每次打开终端都要临时设置PATH变量,很烦人。这时候：

flutter doctor

如果还是提示command not found，那就是没有配成功，查看一下步骤，有没有错误的。

如果在终端运行

flutter doctor

提示如下：

Waiting for another flutter command to release the startup lock

解决方法

1、打开flutter的安装目录/bin/cache/（可以通过指令进去）
2、手动删除lockfile文件，也可以指令删除（rm -rf lockfile）
3、重新在终端运行 flutter doctor查看一下，是否检查环境安装

四、检查环境安装

检查依赖环境是否正常，完成安装。
终端输入：

cd ./flutter
flutter doctor

这个命令会检查环境并在窗口显示报告，Dart SDK与Flutter捆绑在一起;没有必要单独安装Dart。仔细检查输出是否需要安装其他软件或执行其他任务

注意点：

第一次运行命令时，它会下载自身的依赖关系并自行编译，后续运行会快很多。
如果过程失败，多重复几次，并根据命令行提示进行安装。

Last login: Sun Apr 28 14:44:44 on ttys000
localhost:~ ypf$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
localhost:~ ypf$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
localhost:~ ypf$ git clone -b master https://github.com/flutter/flutter.git
fatal: destination path 'flutter' already exists and is not an empty directory.
localhost:~ ypf$ export PATH="$PWD/flutter/bin:$PATH"
localhost:~ ypf$ cd ./flutter
localhost:flutter ypf$ flutter doctor
Building flutter tool...
Flutter assets will be downloaded from https://storage.flutter-io.cn. Make sure
you trust this source!
Downloading Material fonts...                                       5.2s
Downloading android-arm-profile/darwin-x64 tools...                 6.1s
Downloading android-arm-release/darwin-x64 tools...                 5.2s
Downloading android-arm64-profile/darwin-x64 tools...               6.5s
Downloading android-arm64-release/darwin-x64 tools...               5.4s
Downloading android-x86 tools...                                   40.4s
Downloading android-x64 tools...                                   41.9s
Download failed -- attempting retry 1 in 1 second...                    
Downloading android-arm tools...                                   20.3s
Downloading android-arm-profile tools...                           11.6s
Download failed -- attempting retry 1 in 1 second...                    
Downloading android-arm-release tools...                           11.0s
Downloading android-arm64 tools...                                 21.4s
Download failed -- attempting retry 1 in 1 second...                    
Downloading android-arm64-profile tools...                         15.1s
Downloading android-arm64-release tools...                         10.2s
Downloading ios tools...                                           97.3s
Downloading ios-profile tools...                                   69.6s
Downloading ios-release tools...                                   57.3s
Downloading Gradle Wrapper...                                       0.2s
Download failed -- attempting retry 1 in 1 second...                    
Downloading package sky_engine...                                   3.4s
Downloading common tools...                                        24.6s
Downloading common tools...                                        25.0s
Downloading darwin-x64 tools...                                    82.0s
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.5.9-pre.43, on Mac OS X 10.13.6 17G65, locale
    zh-Hans-CN)
 
[!] Android toolchain - develop for Android devices (Android SDK version 27.0.3)
    ✗ Flutter requires Android SDK 28 and the Android BuildTools 28.0.3
      To update using sdkmanager, run:
        "/Users/ypf/Library/Android/sdk/tools/bin/sdkmanager"
        "platforms;android-28" "build-tools;28.0.3"
      or visit https://flutter.dev/setup/#android-setup for detailed
      instructions.
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
      --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 10.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:
        brew install ios-deploy
[✓] Android Studio (version 3.1)
[✓] VS Code (version 1.33.0)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.
localhost:flutter ypf$

根据提示继续输入指令，完善自己flutter环境安装。根据上面的提示，iOS配置终端输入一下命令
，不是在flutter目录下，是重新打开终端的默认的路径下：

    brew update
    brew install --HEAD usbmuxd
    brew link usbmuxd
    brew install --HEAD libimobiledevice
    brew install ideviceinstaller
    
   // ios-deploy not installed. To install:
    brew install ios-deploy

然后在用flutter doctor查看一下。

//我们已经将Flutter PATH环境变量永久添加到系统路径中，不然每次重启终端都要调用设置临时path路径
export PATH="$PWD/flutter/bin:$PATH"    

cd ./flutter
flutter doctor

根据上面的提示，Some Android licenses not accepted.解决这个执行命令：

flutter doctor
  --android-licenses

然后根据提示信息输入 y 就行了。

还有一个就是android sdk的版本太低，更新sdk版本为最新就行：

android_config.png

点击Configure弹出下拉框选择SDK Manager。

android_config-1.png

android_config-2.png

把最新的sdk勾选上下载。下载完之后，打开终端，检查一下android环境配置是否成功

export PATH="$PWD/flutter/bin:$PATH"    
cd ./flutter
flutter doctor

如果出现这个

flutter_doctor_success.png

说明你的安装环境已经完成了。

Android Studio配置Flutter环境

启动Android Studio.
打开插件首选项 (Configure>Preferences>Plugins on macOS）
选择 Browse repositories…, 选择 Flutter 插件并点击 install.
重启Android Studio后插件生效.

配置Flutter.png

重启完Android Studio.会发现多了一个Start a new Flutter project选项

flutter_project.png

点击进入选择下一步，然后配置flutter sdk的路径如图：

配置flutter路径.png

点击next，一个在Android Studio工具创建的Flutter就算成功了。

使用xcode运行项目

在生成Flutter项目中有android和ios两个文件。

双击进入ios文件
在前提现在xcode的情况下双击Runner.xcworkspace文件就可以打开。（ios开发比较熟悉，可以忽略）

VSCode配置Flutter环境

安装好VSCode并打开VSCode，操作如图：

VSCode教程1.png

安装完之后，通过终端创建你的flutter项目。可以在想在位置创建你的fluuter项目
```
  flutter create 项目名
```
创建完项目之后，通过VSCode打开项目，并运行项目指令：
```
  flutter run
```

VSCode教程2.png

运行完项目就可以看到模拟器上运行着项目：

VSCode教程3.png