Flutter入门浅谈

作为一个移动端码农，耳闻Flutter已经是几年前的事，Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。当初因为各种顾虑而没有下定决心去学习它。最近Flutter又出现在我的技术圈子中，想着几年过去应该比较成熟、稳定了，也逐渐被国内一些大厂所接纳，某鱼就是使用Flutter来实现的（某票最近也在使用某鱼，还发现了挺多bug，估计不是亲儿子）。于是忍不住去看了一下Flutter的开发文档，被文档中多次提及的富有表现力，漂亮的用户界面、现代的，响应式框架、快速开发等字词所吸引，其实最重要的还是看中Flutter拥有跨平台的能力，一套代码能够同时在iOS和Android上运行（想想都有点小激动）。于是决定开始Flutter的学习之旅。
通过阅读文档，使用Flutter来进行开发必备以下条件

1. 电脑一台，Window、Mac、Linux三个系统都可以
2. Flutter SDK
3. 编辑器，Android Studio、VS Code都可以
4. 掌握Dart语言

作为iOS开发的我，看了以上四条仅仅只有第一条，一台我熟悉的Mac系统电脑。果然是万事开头难啊！不能临阵退缩，唯有顶硬上。
怎么获取Flutter SDK呢？我已经准备好了以下几个下载地址，任君挑选。根据自己的电脑操作系统下载对应的SDK

• Flutter SDK 版本列表
• GitHub下载
• Flutter官网下载（需要翻墙）
• 清华大学开源软件镜像站

编辑器我选择了Android Studio。为什么呢，万一苹果不行了转阵Android提前熟悉一下开发工具也好。
Dart语言又是一门全新的语言，作为开发者的你绝不能有抵触新技术的心理。有了之前学习Swift的经验，只要肯用心、花时间去学习一下新语言的语法糖，了解这门语言的特性，再找些旧的项目用新的语言重新实现一遍，能助你更好的掌握这门语言，入门还是简简单单的事情。有句话说的好：实践是检验真理的唯一标准，切记不要纸上谈兵。当你接触多几门语言后，你会发现它们之前是有许多共性的，掌握了一门语言再去学习另一门语言就犹如顺水推舟。当然雕刻自己的过程也是最痛苦的。

当你以为具备了以上四个条件就可以大展拳脚好好干一番事业时，却发现这只是一个开始😭。我们还有最后一个“拦路虎”必须要跨越它，掌握Flutter框架的用法。特别推荐你到Flutter开发文档这里去获取你想要的，如果你觉得你的英文了得，还可以通过点击文档内容查看对应的英文，看完里面的文档让你入门已是绰绰有余的了。

首先是要怎么搭建用户界面。Flutter 是通过 widget 来构建你的 UI 界面，在 Flutter 中，你看到的图像，图标和文本都是 widgets，几乎所有东西都是 widget —— 甚至布局模型都是 widgets，可以说是万物皆widget。
我们知道了界面都是通个widget来构建的，那么它们是怎么布局的呢？Flutter 中的布局有三个要点

• Widgets 是用于构建 UI 的类。
• Widgets 可以用于布局和展示 UI 元素。
• 通过组合简单的 widgets 来构建复杂的 widgets。

Flutter的布局方式与iOS中的坐标系布局、约束布局有着天壤之别。习惯了iOS的布局思想，在一开始使用Flutter的时候布局思想有点难转换过来，所以推荐你到Flutter中的布局这里好好啃完里面的知识点，最好对照着里面的示例手码一次，好记性不如烂笔头。
当你掌握了怎么搭建和布局界面后，我相信你狂躁的心已安耐不住，让我们来搭建第一个Flutter应用。Android Studio默认是不支持创建Flutter工程的，需要我们安装Flutter和Dart 插件，你可以参考编辑工具设定。
从Flutter工程的目录中，我们看到它包含了android和ios两个工程

当我选择连接的苹果设备运行时，报了证书配置错误，需要我们打开ios工程来配置正确的证书。

配置好证书重新运行后，我们看到如下界面

我们顺藤摸瓜，找到里面的实现代码是在 lib/main.dart文件里面，所以我们程序入口的代码应该写在main.dart里面。
我非常喜欢热重载这个功能，它可以大大缩短我们的调试时间。Xcode也有这个功能，但是需要下载工具没有这个方便。如果没有热重载这个功能，我估计是没有人会使用Android Studio去开发Flutter应用吧。通过控制台打印的Log看到，从点击运行按钮那一刻起到应用真正跑起来居然用了73秒，整整73秒，天啦噜！真不敢想象我修改一点代码重新运行需要等上一分多钟的时间才能看到修改的效果，想砸电脑的心情都有吧。

赶紧试了一下热重载这个功能，果然没有让我失望，仅仅几百毫秒的时间就看到了改动代码的效果，大爱啊！

如果你需要使用外部 package（第三方库），你可以在 pub.dev找到更多的package。

1. 在pubspec.yaml 中，将你需要的package添加到依赖项列表，如下面高亮显示的行：
   
2. 在 Android Studio 的编辑器视图中查看 pubspec.yaml 文件时，点击 Pub get 会将依赖包安装到你的项目。你应该会在控制台中看到以下内容：
   

Flutter开发文档里面含盖了开发一个Flutter应用所需要的所有知识点，从开发到测试调试到性能优化再到打包部署，应有尽有。

最后“大动干戈”了约两周后，成功的“复制”出了一个APP，由于各种原因，所以不方便把代码公开，给个展示图

到此为止，也算是入门了，离精通的路还有很长。路漫漫其修远兮，吾将上下而求索。
幻想一套Flutter代码便能同时运行在iOS和Android两个平台上，那就是一个人干了两个人的活，老板会不会给我发两个人的工资啊，两个不行一个半也是可以啊😝。不过理想很丰满，现实却很骨感，就让我们拭目以待吧。