一. 简单说点什么

我尽量不打错别字，用词准确，不造成阅读障碍。

最近在学习Flutter，看文档看的我实在困得不行，打算写点东西来提提神，所以有了这篇文章，主要记录原生开发者学习Flutter的一些过程和心得。

先说一下，我有RN的基础，所以如果你也是（原生+RN），那么这篇文章你真是找对了。没有RN基础也可以看，影响不大。

二. 怎么学习Flutter？

官方文档YYDS：不管是RN的学习还是Flutter的学习，我都是第一时间找的官网，甚至原生也是要去官网学习，幸好Flutter有中文网，比RN学起来还舒服一些。Flutter的中文网是由中国Flutter社区开发者们协作完成、与官方保持同步更新的，虽然不是官方的，但是也比较有保障。RN的中文网是一个公司翻译的，也不是官方的，而且更新比较滞后（以至于有人看到中文网不更新了就觉得RN都不更新了，我也是醉了，不能看看github吗），附上Flutter官网及中文网地址：

跟着大佬跑：不得不说，稀土掘金上大佬多啊，有幸找到一些资料，最后找到一篇大佬的电子书，附上：

《Flutter实战.第二版》

三. 学习Flutter的一些概念区分（特指与原生相比）

Flutter的UI相关
1. 声明式UI和命令式UI：原生的XML编写UI的方式属于命令式UI（虽然不太纯粹），就是提前定义好UI的结构，再通过代码命令的方式更新UI，如：setText(...)、setImageResource(...)等等，所以需要先findViewById(...)。Flutter和RN属于声明式UI，包括Compose也是使用的这种方式（感觉是大趋势啊，虽然我不喜欢）。因为我有RN基础，所以学起来比较快，其特点就是完全通过代码的方式嵌套编写UI，再通过setState(...)方法去更新UI，这种方式其实是有特点的，起码不用findViewById(...)了，更注重表达，更新UI只用一个setState(...)就全搞定。具体区别附上一篇文章，可以看看：从Flutter到Compose，为什么都在推崇声明式UI？理解个差不多就行了，不用深究，没啥用，掘金上也有其他文章，罗里吧嗦的说了一大堆，不爱看。
2. 一切皆widget：确实是一切皆widget，比如TextView就对应Text这个widget，但是，不是一个原生组件完全对应一个widget，比如TextView是有padding属性的，但是Text这个widget就没有，所以需要一个叫Padding的widget把它包裹起来，然后设置这个Padding的属性达到padding的效果：
```
Container(
  margin: const EdgeInsets.only(left: 16.0, right: 16.0, bottom: 16.0),
  child: Padding(
        padding: EdgeInsets.only(left: 16, right: 16, top: 12, bottom: 12), //padding属性在这里
        child:Text(
        "43",
        style: TextStyle(fontSize: 16, color: Colors.brown)
        ),
      ),
)
```
这种声明式UI没有预览，所以UI全在脑子里，好在有热加载，所以开发效率还可以。

四. Flutter初学踩坑

实在忍不住想说一说遇到的坑，上来就是大坑，我都暴躁了。

搭建开发环境：这一步差点让我砸了电脑，从业这么多年仍然逃离不了这个魔咒。网上关于环境搭建的文章很多，但是请注意时间，请找Flutter 3.0之后的搭建文章，虽然和之前的差别不大，但是还是尽量避免吧。掘金上某胖的文章阅读量很大，实际操作发现有些细节没有交代出来，所以不太建议看，我个人是参考的下面两篇文章（说明一下，安装完Android Studio后，是可以直接在里面下载SDK的，不用去Oracle官网下，老手们应该懂得，请忽视），虽然也有些问题：

此外，上面的《Flutter实战.第二版》其实也是可以的，大体流程起码没问题。

注意：环境变量配置，镜像配置是要先配置好的，否则很多问题，似乎 storage.flutter-io.cn 这个地址不行了，但是我用着还是可以的。

不想写了，继续看书了，要不然越写越多，停不下来，有时间我再把这个文章补一补。

Android原生开发者学习Flutter之旅（一）

一. 简单说点什么

二. 怎么学习Flutter？

三. 学习Flutter的一些概念区分（特指与原生相比）

Flutter的UI相关

四. Flutter初学踩坑