学习笔记：flutter项目搭建(mac版)

什么是flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。

flutter具有以下几个优点

• 快速开发(具有热加载功能，类似于webpack配置的devServer的热加载)
• 富有表现力，漂亮的用户界面
• 现代的，响应式框架（State类，通过调用setState，改变对应的值，widget就会重新渲染）
• 访问本地功能和SDK
• 统一的应用开发体验

移动端解决方案的几个阶段

1. webview在原生app中嵌入h5页面
2. hybrid 通过JSBridge来做native与非native之间的桥梁（本质还是web模式）
3. react-native 将view编译成原生的view从而达到良好的体验，但还是需要JSBridge做连接
4. Flutter 吸收了前者的教训之后,在渲染技术上,选择了自己实现(GDI)

reactive-native原理图

flutter实现原理

开始搭建flutter

使用镜像

flutter官方为中国开发者搭建了临时镜像，大家可以把下面的环境变量加到用户的环境变量中mac直接vim

~/.bash_profile

修改即可，如果用了zsh 也可

~/.zshrc

,修改完

source~/.bash_profile

即可

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

获取Flutter SDK

传送门需要FQ，或者直接去github下载安装包

下载完解压，然后添加

flutter

到相关工具的path中

export PATH=

pwd

/flutter/bin:$PATH

注意pwd为你解压flutter安装包的路径

运行flutter

运行

flutter doctor

来查看还有什么东西没有安装，然后根据提示安装相应的东西即可

创建一个flutter项目

以上所有安装都完毕后可以再terminal通过

flutter create 目录名

来创建项目，然后执行

open -a Simulator

打开苹果手机模拟器

安装下面的包来确保能进行ios模拟调试

brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup

在你Flutter项目目录中通过 open ios/Runner.xcworkspace 打开默认的Xcode workspace.最后执行

flutter run

你的第一个flutter项目就跑起来了

flutter推荐的编辑器有

vscode

以及

Android studio

安装对应的插件即可

详细安装教程可以具体看flutter官网，本教程为自己的学习笔记，后面会另外开文如何使用flutter来进行开发