flutter探索

目标：

1、做一个自己认为的移动端产品最常用页面的demo，比如无线列表+详情等等这样的，自己定
2、产出这个过程中切换的难易程度，切换的心得体会，以及遇到的问题总结
3、如果新产品要用Flutter 我们怎么做

结果：

大概5天每天3-5小时。2天了解现状，2天完成在MacOS10.15.7上搭建iOS开发环境，1天创建flutter项目，将示例应用跑在Chrome上。

这个过程中感觉搭建环境比较费时，有很多坑，在下面步骤中进行了说明。Dart语言和UI组件对于前端来说应该都不难，与web前端开发其实很接近，2天看看主要语法就能跑起来，关键需要花点时间配置工程化工具。

如果我们以后要用Flutter，得先准备软硬件环境，先把框架主题什么的配置好，开发起来就快了。

如果要做客户端应用，并且采用跨平台技术，我推荐Flutter，

优点：一套代码两个平台运行，自带绘制引擎，Android和iOS两端高度一致性，解决了以前两端架构、实现、视觉效果等多种差异的问题。

flutter 的 UI 部分除了没有 jsx 之外，其余部分的设计思想与 react 大同小异。

缺点：目前Dart 的社区生态，开源库等，还不像JS那么丰富。

除了UI部分外，调用系统硬件服务，遇到问题还得需要终端（iOS/Android）开发技术支持（也是所有跨平台方案共同的问题）。

对比RN：RN依赖原生UIKIT，两个问题1.原生版本升级，造成的迭代问题。2.由于要翻译成原生的展示，iOS和Android控件有差异，挺多适配问题，两端无法高度一致。

对比App内使用H5：Webview的性能和用户体验确实是差一点。

概览

 

强类型， 类C

目前完全支持移动端 。桌面应用能跑起来，还不能打包 

目前稳定版不支持windows

 https://flutter.dev/docs/development/tools/sdk/release-notes  查看版本支持

web和移动平台Android 和 iOS都支持，适应性良好。

 2021年，Dart新特性

 

 

编码时就进行空检查 声明类型String？；Dart直接调c函数

 目前腾讯等一些大厂都有在使用flutter开发创业项目，因为人手少，时间短，开发快

 2020年还排第二，2021年就超过了RN

参考链接：https://www.bilibili.com/video/BV1YV411e7Fh?from=search&seid=7283698439233277114

安装步骤

官网flutter.io  -> Docs 下载安装包，和安装教程

Mac版地址：https://flutter.dev/docs/get-started/install/macos

10.1版https://download.developer.apple.com/Developer_Tools/Xcode_10.1/Xcode_10.1.xip

因为 Flutter desktop 是实验性特性，在稳定版本的 Flutter 暂时是没有的，所有需要切换 Flutter 的版本 

自己研究的配置环境步骤

Mac电脑

1.flutter.io下载SDK，在开发位置解压，

配置Mac环境变量, 终端打开vim ./.bash_profile, 添加一个变量export FLUTTER_PATH=/你自己的flutter所在目录/flutter/bin

别忘在PATH变量 后拼接/bin:$FLUTTER_PATH

更新环境变量source ~/.bash_profile

运行flutter doctor 诊断环境

2.若用VSCode开发，可在VSCode中安装插件flutter，重启VS，若提示没有flutter SDK，就locate SDK，找到你解压的flutter 的bin目录选中。

3.选菜单栏的view->commond pallet ->输入flutter: 就显示了所有flutter的命令，选项中选run doctor（doctor的环境诊断结果会提示还缺少哪些安装，按提示安装即可）

我这里提示安装Xcode develop for iOS and macOS

Download at: https://developer.apple.com/xcode/download/

Or install Xcode via the App Store.

提示安装Android toolchain -- develop for Android devices

Install Android Studio from: https://developer.android.com/studio/index.html

 Android Studio -> preferences -> plugins -> Brower Repositories -> 搜flutter -> 安装，重启

5.安装xcode

10.13 版MacOS 需安装Xcode_10.1.xip版本，网上找了一版https://blog.csdn.net/annkie/article/details/48625519

下载后解压，然后拖拽到系统的应用程序文件夹里

6.安装ruby 切换默认的软件源为国内的

需安装环境 homebrew -> ruby -> CocoaPods

首先，替换ruby默认软件源为国内的，参考http://www.cocoachina.com/articles/17622，

注意：国内源已更新为.com。添加  gem sources -a https://gems.ruby-china.com/

查看

gem sources -l

结果为以下，则正确

https://gems.ruby-china.com/

安装CocoaPods

运行  

sudo gem install cocoapods

但是遇到了报错ERROR:

Error installing cocoa:

ERROR: Failed to build gem native extension.

查询之后可以这样解决

sudo gem update --system
sudo gem install -n /usr/local/bin cocoapods

创建flutter项目

配置IDE

vscode中打开Xcode模拟器

TERMINAL

open -a Simulator

问题：模拟器关联不上项目，doctor提示我10.1版本太老，需要xcode 12.0.1 因为我MAC系统是10.15.7，但是没找到12.0.1的安装包。

学习Dart

在线编辑Dart https://dartpad.dartlang.org/?null_safety=true

视频学习：https://www.bilibili.com/video/BV11J411n7Zv?p=5&spm_id_from=pageDriver

强类型语言，在工程上和团队协作上，更可控。

组件库

flutter中文网 https://flutterchina.club/docs/

水平、垂直布局 （学习时间1.5小时）

常用布局组件

 导航

实际上，flutter 团队事无巨细的实现了目前市面上基本上能见到的组件方式和类型。

这真是一个庞大的组件系统，这不是社区提供的，而是官方的。

认为Flutter 通过组合、嵌套不同类型的控件，就可以构建出任意功能、任意复杂度的界面。

缺点 

• 1.学习成本增加，曲线也还是比较陡的。
• 2.组件直接的继承关系路径比较零乱，比如继承自 Widget 是这些大类道还清晰，但是，StatelessWidget和StatefulWidget的子类就过于平行化了，名称上晦涩，没有抽象架构化，分层或者塔型级别。

最后，推荐《Flutter实战》一书，里面解释了实例项目，有全面的全套流程

https://book.flutterchina.club/chapter2/first_flutter_app.html#_2-1-1-%E5%88%9B%E5%BB%BAflutter%E5%BA%94%E7%94%A8%E6%A8%A1%E6%9D%BF

参考资料：

https://flutterchina.club/docs/

https://flutterchina.club/