Flutter入门01 -- 深入理解Flutter与环境搭建

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