flutter环境配置

RN缺点：白话就是RN通过中间一个bridge，将Text 转化成安卓代码Text给安卓用，转化成iOS代码UILable 给苹果用，这个bridge是单线程，业务太多，容易阻塞，用户卡顿，还会造成ios和安卓代码不一致，要频繁判断ios 跟安卓分别设置。
RN优点：完美实现热更新

Flutter：直接跟安卓和ios进行操作，不需要通过桥，通过谷歌引擎，将苹果的UILable变成Text。
缺点：苹果不支持热更，苹果要嵌入谷歌引擎，包大。

开发⼯具Mac电脑：

• Xcode
• Android Studio https://developer.android.google.cn/studio
  • 要安装插件Dart、Flutter，安装完成后重启Perference>Plugins
  • 安装模拟器
• vs code https://code.visualstudio.com
  • 常用VScode插件
    • Bracket Pair Colorization 彩虹括号
    • Chinese (Simplified) 中文版插件
    • Dart 、 Flutter flutter开发插件

配置环境

1. 下载Flutter SDK 下载链接
2. 将安装包zip解压到你想安装Flutter SDK的路径（这个⽬录以后不需要动，故不建议放在deskTop）
   3.添加 flutter 相关⼯具到path中

export PATH=`⾃⼰存放flutter的路径`/flutter/bin:$PATH

4.配置镜像

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

5.运⾏ flutter doctor 查看安装结果如何

image.png

如果报这个错，其中这个cmdline-tools component is missing Run path/to/sdkmanager --install "cmdline-tools;latest"怎么办呢，意思是cmdline-tools这个东西没有安装，我们在Android Studio中的设置里找到并安装即可，如下图

image.png

之后还有Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
我们运行这个命令，之后要输入数次y，最后提示
All SDK package licenses accepted
就是成功了

再输入flutter doctor 就全是绿色对号了

提示
flutter的开发环境配置好后，退出终端，再进入终端，输入flutter doctor命令后，会显示，zsh: command not found: flutter的错误，原因是新版Mac 从bash变成了zsh

open ~/.zshrc 

如果文件不存在

vim ~/.zshrc 

open ~/.bash_profile

//添加下面三行，保存

export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
export PATH=/Users/计算机名称/flutter/bin:$PATH  //flutterSDK的路径替换一下

然后执行

source ~/.bash_profile

然后把bash_profile的文件复制到zshrc中去

创建一个项目

flutter create flutterdemo（项目名不能有大写）

1.vscode 创建，安装插件Dart、Flutter，Awesome Flutter Snippets
直接在搜索框 （没有的话就 command+shift+p）

image.png

Flutter: New Project

2.用Android Studio 直接new flutter project

image.png

网络请求 这里选择用VSCode开发
pubspec.yaml 文件里面引用框架和图片等，如要使用http网络请求，要在文件中引用一下

dependencies:
  flutter:
    sdk: flutter
http: ^1.0.0

image.png