以下内容来自组内分享，如有侵权，请联系作者删除。
目录：

• 什么是Flutter？
• Flutter环境配置
• 如何创建一个Flutter app?
• Flutter开发语言以及代码结构
• Flutter优缺点

1.什么是Flutter？

背景：在全球，随着Flutter被越来越多的知名公司应用在自己的商业APP中，Flutter这门新技术也逐渐进入了移动开发者的视野，尤其是当Google在2018年IO大会上发布了第一个Preview版本后，国内刮起来一股学习Flutter的热潮。目前使用flutter 开发的app有闲鱼。

简介：Flutter 是 Google推出并开源的移动应用开发框架，主要是跨平台、高保真、高性能。开发者可以通过 Dart语言开发 App，一套代码同时运行在 iOS 和 Android平台。 Flutter提供了丰富的组件、接口，开发者可以很快地为 Flutter添加 native扩展。同时 Flutter还使用 Native引擎渲染视图，为用户提供良好的体验。

2.Flutter环境配置

• 操作系统:MACOS
• 磁盘空间：700M(不包括IDE所占空间)
• 工具：bash mkdir rm git curl unzip which
  镜像使用：
• 国内访问Flutter受限制，Flutter官方为中国开发者搭建了临时镜像。把镜像添加到用户环境变量中。（临时镜像）
• export PUB_HOSTED_URL=https://pub.flutter-io.cn
• export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn

bash_profile

• 因为flutter-io.cn服务器是GDG China 维护的Flutter依赖项和临时包的临时镜像。Flutter团队无法保证这个服务的长期可用性。如果有兴趣设置自己的影像可以联系flutter开发团队(lutter-dev@googlegroups.com)。

社区运行的镜像站点：

• 上海交通大学Linux用户组：FLUTTER_STORAGE_BASE_URL:https//mirrors.sjtug.sjtu.edu.cn
• PUB_HOSTED_URL: https://dart-pub.mirrors.sjtug.edu.cn

配置flutter环境（命令行）

$ export PUB_HOSTED_URL=https://pub.flutter-io.cn
$ export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
$ git clone -b dev https://github.com/flutter/flutter.git
$ export PATH="$PWD/flutter/bin:$PATH"
$ cd ./flutter
$ flutter doctor
flutter doctor  作用：检查是否需要安装其他依赖来完成安装

flutter doctor

环境配置注意项

使用zsh客户端的时候终端启动时_{/.bash_profile将不会被加载，解决办法就是修改}./zshrc，在其中添加：source ~/.bash_profile

iOS设置

• 安装xcode
• 设置iOS模拟器 open -a Simulator
• 启动应用程序flutter run命令(工程目录下)

配置编辑器

• 使用的是VS Code（版本1.20.1及以上版本）
• 安装flutter插件
• 通过flutter doctor 验证设置

PS:如何安装flutter 插件

• 启动VS Code
• 调用view->command palette
• 输入install 选择Extentions:Install Extention action
• 搜索flutter 选择后 点击install
• install完成之后点击OK重新启动VS Code

3.如何创建一个Flutter app?

VSCode->view->command palette->Flutter new project->输入项目名称(小写字母可以使用下划线)->等待项目创建完成

工程结构

• .idea IntelliJ IDEA
• .vscode vscode 附属相关
• .android 安卓工程
• .build 编译产物
• .ios iOS代码
• lib 写代码的地方
• test
• .packages
• pubspec.lock 编写文件配设的版本
• pubspec.yaml 编写文件配置的语言

• README.md

  
  工程结构

4.学习flutter需要了解什么？？

什么是widget?

Flutter Widget采用现代响应式框架构建，这是从 React 中获得的灵感，中心思想是用widget构建你的UI。 Widget描述了他们的视图在给定其当前配置和状态时应该看起来像什么。当widget的状态发生变化时，widget会重新构建UI，Flutter会对比前后变化的不同， 以确定底层渲染树从一个状态转换到下一个状态所需的最小更改

什么是dart？

Dart 是一个静态语言，这也是相对于js的一个优势。Dart可以被编译成js，虽然看起来像java。静态语言可以避免错误，获得更多的编辑器提示词。极大的增加了可维护性。

pub依赖之yaml文件

Flutter工程之间的依赖管理是通过Pub来管理的，依赖的产物是直接源码依赖，这种依赖方式和iOS中的Pod有点像，都可以进行依赖库版本号的区间限定与Git远程依赖等，其中具体声明依赖是在pubspec.yaml文件中，其中的依赖编写是基于YAML语法，YAML是一个专门用来编写文件配置的语言，声明依赖后，通过运行flutter packages get命名，会从远程或本地拉取对应的依赖，同时会生成pubspec.lock文件，这个文件和IOS中的Podfile.lock极其相似，会在本地锁定当前依赖的库以及对应版本号，只有当执行flutter packages upgrade时，这时才会更新。

5.Flutter 优缺点

Flutter优点

• 性能强大，流畅

  • Flutter 和weex以及rn相比，性能好很多。谷歌直接在两个平台上重写了各自的UIKit。对接到平台的底层，减少了UI层的多层转换。UI性能可以和原生媲美。

• 优秀的动画设计

• Flutter动画比较简单，只需要将一个组件的属性通过补间(Tween)关联到动画对象上，Flutter会确保每一帧渲染正确的组件上，形成连贯的动画。

• UI跨平台稳定

• google直接在两个平台底层上重写了UIKit 不依赖于css等外部解释器。

Flutter缺点

• 假装跨平台，避不开原生代码组合而不是继承的思路

• 这个框架其实就是UI跨平台，具有与原生代码交互的能力，硬性要求啊 前端同学别轻易入坑。。(前端同学那里知道UIViewcontroller和Activity。。成本略高)再说了交互问题 不明白原生的怎么玩的转交互

• 采用组合的方式而不是继承

• Flutter提倡组合，而不是继承。原生开发中我们可能会继承自UIView在这个基础上进行自定义。而flutter中的属性都是final的。你继承一个Container，不能在它的生命周期来修改属性。所以需要组合嵌套多种widget比如说：row container listview等widget。

• Wall

• 这点不用多说了。

总结:

Flutter开发主要在于要了解原生的环境。(好像跨平台的框架都是这样)，想要通过跨平台的api拿下两端开发是不太现实的。(平台本身存在差异性)有点也很明显，动画比较流畅。

参考链接:

https://flutterchina.club/setup-macos/
https://segmentfault.com/a/1190000017164263

安装时候遇到的问题：

• 执行flutter doctor 命令的时候，报错： -bash: Flutter: command not found
  这个问题是路径的问题：
  解决方案：
  在_bash_profile中设置路径

# 这里设置的是克隆flutter源代码的地址
export PATH=/Users/userName/flutter/bin:$PATH

如果使用的是zsh客户端：
使用zsh客户端的时候终端启动时_{/.bash_profile将不会被加载，解决办法就是修改}./zshrc，在其中添加：source ~/.bash_profile