flutter-hello world

flutter 的第一个demo，实现一个hello world。
材料准备：
mac 笔记本
安装了Android studio和xcode
来搭建环境（我使用Android studio、 dart）

发现坑太多，然后先来简单的终端实现

一、clone flutter

终端，找个位置执行
git clone https://github.com/flutter/flutter.git
报错：fetch-pack: unexpected disconnect while reading sideband packet
如下图：

截屏2022-05-11 上午11.11.36.png

发现是文件权限造成的，chmod 777 xxx( 当前clone文件夹路径）
再次clone就ok了

二、配置环境变量

我的mac 配置文件.zshrc,首先打开配置文件

cd
open .zshrc

粘贴 环境变量

export PATH="$PATH:$HOME/.flutter/bin:$PATH"

这里我把之前clone的flutter文件改成.flutter文件放在home下了
执行命令

source ~/.zshrc     

三、安装flutter

执行命令 （这里第一次执行，需要等一下，但是我直接contrl+z结束了）

 flutter doctor

执行效果如下图：

截屏2022-05-11 上午11.18.48.png

这里flutter 环境配置完成
来新建一个demo吧
然后配置发现不对，没有SDK，好吧，之前错了，重来flutter doctor
执行 flutter doctor，这里第一次执行，需要等一下，效果如下图：

截屏2022-05-11 下午12.15.58.png

根据提示，再次执行

flutter doctor --android-licenses

接着根据提示输入y,直到结束
继续再次执行 flutter doctor ，如下图：

截屏2022-05-11 下午12.17.58.png

如果报错

Failed to retrieve the Dart SDK from: https://storage.googleapis.com/flutter_infra_release/flutter/1b064fd1a39f3afd2800cdc6c32ac47ae271b06b/dart-sdk-darwin-x64.zip
If you're located in China, please see this page:
https://flutter.dev/community/china

执行以下命令进行配置：

export PUB_HOSTED_URL=https://dart-pub.mirrors.sjtug.sjtu.edu.cn
export FLUTTER_STORAGE_BASE_URL=https://mirrors.sjtug.sjtu.edu.cn

四、检查

flutter doctor -v可看到相关配置，如下图：

截屏2022-05-11 下午2.10.37.png

五、新建demo

在Android studio新建flutter项目，
首次新建项目，选择flutter，配置SDK（就是之前clone的flutter，我已经把改文件名改为.flutter），选择java和oc，点击finish，完成新建一个demo，
选择如下图：

截屏2022-05-11 下午12.27.12.png

终端命令新建项目

(这里iOS选择oc “-i objc”，iOS选择swift"-i swift"；android选择java“-a java”，android选择kottlin“-a kottlin”）

flutter create -i swift -a kottlin ProjeckName

六、运行

android和iOS模拟器效果，如下图

截屏2022-05-11 下午1.34.22.png

flutter项目中，安卓模拟器基本能直接运行，前提是Android studio已经配置了模拟器。当然，这里安卓模拟器运行我也遇到坑了，是因为我的mac上安装了两个版本Android studio，由于这两个版本差别比较大，使用新版本Android studio打开flutter项目后，运行模拟器报错，然后发现何止模拟器报错，运行安卓项目也报错，运行不了[\捂脸!]，后来发现flutter配置的jdk版本导致的（我的mac配置了两个jdk，默认低版本，flutter配置的就是默认的低版本），换低版本Android studio就ok了。

iOS模拟器需要使用xcode打开iOS项目，运行模拟器后，才能在flutter项目上看到可选择的iOS模拟器，个人理解，就是需要启动一下iOS的模拟器。然后我对此进行了一下验证，使用xcode新建一个项目，并启动了第二个模拟器iOS-SimulatorB，在flutter项目上果然看到了这个模拟器iOS-SimulatorB。

七、hello world

在目录main.dart，插入成hello world 标签

Text('Hello world'),

代码和运行效果如下图：

截屏2022-05-11 下午2.24.36.png