Mac flutter vsCode以iOS开发的角度学习flutter

前言

Flutter的优点大家都知道，跨平台，高性能.目前来说最有希望统一移动端的跨平台技术，但是市面上的学习资料要么是站在前端的角度，要么是站在安卓的角度,mmp，说好的面像全部开发者呢.弱小而无助的iOS开发者表示强烈不满，但是这些都难不倒我们强大的iOser,毕竟OC这么怪异的语法我们都能接受，他们能快速接受吗？不管怎样，自信要有！气质上不能输，我们还有啥不能接受的呢？小编自学flutter也学了一段时间了，把自己在学习过程中的一些坑或者说分享给大家，站在iOS开发的角度上去学习flutter，希望能在也在学习flutter的你一些帮助.

搭建flutter开发环境

系统要求：

要安装并运行Flutter，您的开发环境必须满足以下最低要求:

操作系统: macOS (64-bit)

磁盘空间: 700 MB (不包括Xcode或Android Studio的磁盘空间）.

工具: Flutter 依赖下面这些命令行工具.bash, mkdir, rm, git, curl, unzip, which

安装步骤：

1、打开终端，cd到你要安装的目录，比如我要安装到Documen目录下

2、下载flutter，在刚才的基础上

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

注意：有的会直接到github去下载flutter然后放在自己的目录下，这样做的话接下来的操作会报错的，以为缺少.git文件，亲身实践得到的教训。也就是下边的错误。

The Flutter directory is not a clone of the GitHub project.

比如我是下载到Document目录下，下载完成之后，将文件夹改名为flutter

3、配置flutter路径，在终端上输入

vim ~/.bash_profile

4、添加以下配置，点击i进入编辑状态，在文件后面把下边三行代码粘贴进入，注意！！！

/Users/zhangjinshan/Documents/flutter这是我电脑的flutter的安装路径，你要根据自己的安装路径进行修改,不知道的就cd 进入你的flutter安装目录下，pwd就可以看到路径，然后替换下边第三行代码的XXX的部分即可，比如的路径是:export PATH=${PATH}:/Users/zhangjinshan/Documents/flutter/bin:PATH

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

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

export PATH=${PATH}:/xxx/xxx/xxx/xxx/bin:PATH

然后esc,:wq进行保存退出vim操作

5、设置配置文件立即生效

source ~/.bash_profile

6、下载flutter工具，cd进入自己的flutter目录进去，然后执行

flutter doctor

该命令检查您的环境并在终端窗口中显示报告。Dart SDK已经在捆绑在Flutter里了，没有必要单独安装Dart。 仔细检查命令行输出以获取可能需要安装的其他软件或进一步需要执行的任务。

按照检测结果的说明，如果有[!] ✗ 标志，表示本行检测不通过，需要做一些设置或者安装一些软件。因为我是iOS开发者，所以只针对iOS开发体系

所有看上面有提示x的所以就执行每一行提示的指令

执行完，再运行flutter doctor

提醒我要更新最新的Xcode，因为我电脑装了两个Xcode ，一个xcode 10.3,一个Xcode 11，这简单，我切换下就可以了

sudo xcode-select --switch /Users/zhangjinshan/Downloads/Xcode\ 2.app/Contents/Developer

sudo xcodebuild -runFirstLaunch

其中/Users/zhangjinshan/Downloads/Xcode\ 2.app/Contents/Developer是我Xcode11的安装目录，根据自己的Xcode的实际目录进行替换，切换完再运行flutter doctor，只剩下Android Studio (not installed)没安装，Very Good！我是iOS开发者，所以目前只针对iOS开发体系，别的先不管。

7、下载VSCode https://code.visualstudio.com，然后选择Mac版本下载

8、配置vcCode,打开vsCode,按照箭头所示，install Flutter

9、开始创建新应用

启动 VS Code

调用View>Command Palette…

输入 ‘flutter’, 然后选择‘Flutter: New Project’action

输入 Project 名称 (如jsapp,注意：要全部小写，不然不通过), 然后按回车键(可能时间较长)

指定放置项目的位置，然后按蓝色的确定按钮

10、运行项目

点击Run>Start Debugging，选择模拟器

等待应用程序启动

11、至此你的flutter程序就可以跑起来了

接下来我会持续分享自己的flutter的学习过程和总结，大家互相学习，共同进步，如有错误，多提宝贵建议!