Mac 笔记本 flutter 开始启航（一）开发环境搭建

前言

最近身边好多朋友都在学习flutter，而自己在在招聘网站上也看到很多招flutter开发工程师，所以也要拥抱新的技术变化。

准备

自己在网上查找了一番，最后觉得还是从flutter中文网开始学习靠谱点。
flutter接口文档：https://api.flutter.dev
flutter实战电子书：https://book.flutterchina.club

1.环境的搭建

本人的是mac 笔记本，所以按如下搭建：入门: 在macOS上搭建Flutter开发环境

1.1安装flutter sdk

来到 flutter sdk releases 界面 https://flutter.dev/docs/development/tools/sdk/releases?tab=macos
选中macos下

sdk.png

sdk 下载完后直接双击解压在桌面的

屏幕快照 2019-05-20 上午11.16.37.png

按着英文文档中的步骤操作 https://flutter.dev/docs/get-started/install/macos
终端命令行一波（具体看英文文档）

9CB6B61A-7AC8-4371-B080-0A145052FD5F.png

1.2更新环境变量

在英文文档中为什么要配置环境变量，当时我没明白。后来理解了，因为在终端中要用到flutter命令，而更新环境变量操作后，就指定了path ,就不会再打开终端时报flutter: command not found了。

环境变量.png

在 .bash_profile文件添加命令时用 vim ~/.bash_profile 来创建,下图如是：

更新环境变量.png

小插曲去安装Brew工具

终端安装命令：/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" 等待几分钟就Homebrew就安装完了。brew是什么可以参考：Mac OS下brew的安装和使用
为了解决brew报错按步骤一个个安装

brew update
brew install --HEAD usbmuxd
brew link usbmuxd
brew install --HEAD libimobiledevice
brew install ideviceinstaller
brew install ios-deploy

装完之后再 flutter doctor检测一波，及只一报错的解决办法

终端.png

1.2安装安卓sdk

本人mac电脑是已安装xcode的，所以现在报Android的错, android 下载https://developer.android.com/studio
打开之后直接安装 Android SDK components

屏幕快照 2019-05-20 下午1.52.34.png

安装了Android SDK 后再次运行 flutter doctor

android.png

.解决licenses 错误 flutter doctor --android-licenses

Android Studio 配置与使用

上图报的错误是Android studio没有添加flutter插件,于是：

插件.png

安装完后，再重启Android studio
再 flutter doctor检测一波

检测.png

哈哈~，终于没有报错了。

最后

用Android studio 新建flutter工程

新建.png

flutter界面.png

在iphone7模拟器上运行效果

在模拟器iphone 7上运行.png

在Android模拟器上运行(这里要添加Android模拟器Tools->AVD Manager)

Android.png

1.环境就这样搭建好了，在macOS Mojave系统上
2.后面学习Dart语言及工程编译