搭建flutter 环境

搭建flutter 环境

当下flutter 可以算是最火的跨平台开发之一了，工欲善其事，必先利其器。任何一门新技术、新语言的学习，都需要从最基础的工程环境搭建开始，学习 Flutter 也不例外。

准备工作

由于flutter 是跨屏平台开发，最好在MacOS上搭建开发环境，这样就可以调试 Android 和iOS 开发。

安装 Android studio

Android Studio 是基于 IntelliJ IDEA 的、Google 官方的 Android 应用集成开发环境 (IDE)。 我们可以从 官网 上进行下载安装。

安装xcode

Xcode 是苹果公司官方的 iOS 和 macOS 应用集成开发环境 (IDE)。它的安装方式非常简单，直接在 macOS 系统的 App Store 搜索 Xcode，然后安装即可。

安装flutter

Flutter 源站在国内可能不太稳定，因此谷歌中国开发者社区（GDG）专门搭建了临时镜像，使得我们的 Flutter 命令行工具可以到该镜像站点下载所需资源。 对于 macOS 和 Linux 系统来说，我们通过文本编辑器，打开~/.bash_profile 文件，在文件最后添加以下代码，来配置镜像站点的环境变量：

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

然后，到 官网 下载需要的SDK，并解压。 配置环境变量，找到 flutter SDK 所在的文件目录，找到bin 文件夹，macOS 在 ~/.bash_profile 文件中进行配置：

export PATH=~/Documents/flutter/bin:$PATH

然后在终端 输入：

flutter doctor

得到提示

Xcode installation is incomplete; a full installation is necessary for iOS
      development.
      Download at: https://developer.apple.com/xcode/download/
      Or install Xcode via the App Store.
      Once installed, run:
        sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
        sudo xcodebuild -runFirstLaunch
    ✗ 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 4.1)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.

出现这个错误是因为 xcode 没有配置好：

1. xcode-select --install (现版本 Xcode 安装时便已经同步安装好了)
2. 同时 Preferences -> Locations 下的 Command Line Tools 也是默认配置好的

然后再按照提示，然后再终端输入命令

sudo gem install cocoapods

到这来 iOS 工具链配置就完成了。

Android 工具链配置

Android 的配置比 iOS 要容易很多，打开 Android studio -->preference-->plugins-->输入 flutter

到这来，环境搭建就完成了。算下来还是听见到！

打开第一个项目

在flutter 的SDK 里面，给我们提供了几个示例 demo，还是挺不错的。 找到 flutter SDK 的文件夹，打开 examples 看到的熟悉 的 hello_world，然后在Android studio 中打开，build 后，看到熟悉的页面，点击三角形 按钮

然后看到了第一个 flutter 项目

flutter环境搭建就完成了。

总结

这只是flutter 开发之路的第一步，接下来还会继续分析一下学到的东西，开发路上的小学生，一路向前！