Flutter
- Flutter是一个UI SDK；
- 可以进行移动端(iOS，Android)，Web端，桌面端，跨平台解决方案；
- Flutter有统一大前端的野心，并且它正在侵蚀iOS，Android这些原生开发；
- Flutter的官方英文网站：https://flutter.dev
- Flutter的官方中文网站：https://flutter.cn
Flutter的特点
- 美观：使用Flutter内置美丽的Material Design和Cupertino widget，丰富的motion API，平滑而自然的滑动效果和平台感知，为您的用户体验带来全新体验；
- 快速：Flutter的UI渲染性能很好，在生产环境下，Flutter将代码编译成机器码执行，并充分利用GPU的图形加速能力，因此使用Flutter开发的移动应用即使在低配手机上也能实现每秒60桢的UI渲染速度；
- 高效：Hot Reload(热重载)；
- 开放：Flutter是开放的，它是一个完全开源的项目；
跨平台解决方案
- WebView：性能比较差，坑多；
- React Native：简称RN，是Facebook在2015年4月开源的跨平台移动应用开发框架，支持iOS与Android两大平台；
- Flutter：跨平台的终极解决方案，Flutter利用
Skia绘图引擎，直接通过CPU，GPU进行绘制，不需要依赖任何原生控件，而RN必须通过某些桥接的方式先转成原生进行调用，之后再进行渲染；
image.png
Flutter绘制原理
- 待述......
渲染引擎Skia
- Skia是Flutter向GPU提供数据的途径；
- Skia全称为Skia Graphics Library，是一个由C++编写的开源图形库；
- 其能再低端设备上呈现高质量的2D图形，最初由Skia公司开发，后被Google收购；
- 应用于Android，Google Chrome，Chrome OS中；
- 目前，Skia是Android官方的图像渲染引擎，因此Flutter Android SDK 无需内嵌Skia引擎就可以获得天然的Skia支持；
- 而对于iOS平台来说，由于Skia是跨平台的，因此它作为Flutter iOS渲染引擎被嵌入到Flutter的 iOS SDK 中，替代了iOS闭源的
Core Graphics/Core Animation/Core Text，这也正是Flutter iOS SDK打包的App体积比Android要大一些的原因； - 底层渲染能力统一了，上层开发接口和功能体验也就随即统一了，开发者再也不用操心平台相关的渲染特性了，也就是说，Skia保证了同一套代码调用在iOS与Android平台上的渲染效果是完全一致的；
MacOS Flutter的环境搭建
- 选择的操作系统为macOS；
- 第一步：下载Flutter SDK，对应的网址为 https://flutter.dev/docs/get-started/install/macos 这里我下载的是1.20.0版本；本人将flutter文件夹放在了个人用户文件目录下，文件路径为
/Users/liyanyan33/flutter - 第二步：配置Flutter，Dart 环境变量，终端执行
open .bash_profile，打开文件，配置内容如下：
[[ -s "$HOME/.profile" ]] && source "$HOME/.profile" # Load the default .profile
[[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm" # Load RVM into a shell session *as a function*
#配置Flutter环境变量
export Flutter_Home=/Users/liyanyan33/flutter
export PATH=$PATH:$Flutter_Home/bin
export PATH=$PATH:$Flutter_Home/bin/cache/dart-sdk/bin
- 保存退出，然后终端执行
source .bash_profile让环境变量生效，最后终端执行flutter --version与dart --version，可查看flutter与dart的信息，如下所示：
image.png
- 第三步：终端执行
flutter doctor会检测相关的依赖库，会出现以下报错：
image.png
- 针对
Android licenses not accepted，根据提示终端直接执行flutter doctor --android-licenses - 针对
Flutter plugin not installed，原因是Android Studio4.1没有安装Flutter插件，安装如下所示：
image.png
- 重新执行
flutter doctor，依然会报错Flutter plugin not installed，主要原因是android studio 4.1升级过程中，改变了plugin folder的路径，终端执行命令ln -s ~/Library/Application\ Support/Google/AndroidStudio4.1/plugins ~/Library/Application\ Support/AndroidStudio4.1，最后再执行flutter doctor，结果成功，如下所示：
image.png
- 第四步：创建Flutter项目，终端执行
flutter create Flutter_01即可，然后使用Android Studio打开项目Flutter_01，然后选择iOS模拟器执行，如下所示：
image.png
开发工具的选择
- 官方推荐两个工具：Android Studio和VSCode
网友评论