抢了客户端程序员的饭碗？2019 Flutter最新入门+实战教学

最新推荐文章于 2022-12-12 23:44:55 发布

sounder2a

最新推荐文章于 2022-12-12 23:44:55 发布

阅读量381

点赞数 1

文章标签： Flutter react native rn 前端跨平台app

本文链接：https://blog.csdn.net/qq_22010473/article/details/93158672

版权

要说2019年前端最火的技术，那就非flutter莫属。在 StackOverflow 2019 年的全球开发者问卷调查中，Flutter 被选为最受开发者欢迎的框架之一，超过了 TensorFlow 和 Node.js。

本文将从多方面介绍flutter，最后为大家提供一套全面的实战课程（附源码）

一、什么是flutter

Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作，并且Flutter是完全免费、开源的。随着国内小伙伴开发热情的高涨，flutter技术社区也相对成熟，出现了很多优秀的教学资源，并且随着版本的更新，对于webview的支持，性能的优化也日益完善，可以这么说，除非你在要撸个游戏，否则所有传统项目都适合用flutter进行开发。

二、flutter的优势有哪些？

1、性能。对于开发人员，首先关注的就是性能了，在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用 Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。下图展示了外卖app的同一个页面，在Android机型下flutter和原生开发的性能对比。总体来看，Flutter的性能表现相当出色，与原生开发相差无几。

用于测试的页面

页面加载时间对比

统计了400+次的数据，原生平均加载时间为210.20ms，flutter为231.62ms。可以看到flutter的性能几乎和原生开发时一致。

渲染性能

2、社区支持。虽然相比与React Native，flutter起步较晚，但由于开发者对flutter的热情，flutter的社区也在日益完善，阿里闲鱼，腾讯Now，美团等大厂也都开始进行flutter相关的实践，github的star更是达到了67.7K（react native为78.3k）。即便是现在，flutter社区的支持也足够你做绝大部分你想做的事情。

3、跨平台一致性

Flutter 的平台相关层是最小的，其中平台（例如 iOS）只提供画布，其余与渲染相关的逻辑发生在 Flutter 内部，从而实现良好的跨平台一致性。几乎可以做到IOS Android代码的100%统一。

4、高效。使用 Flutter 开发应用十分高效。Flutter 广受好评的 Hot Reload (热重载) 功能可以在 1 秒内实现代码到 UI 的更新，使得开发操作周期被大幅缩短。另外，热重载能够在执行的时候保留应用的当前状态 (即 Stateful)，比如您可能在修改一个导航结构里的子页面，保留状态的热重载可以让您不需要重新从起始页一路点击回到这个子页面，而是在代码修改完成后即刻看到结果

5、美观。Flutter 构建应用时，可以让开发者对 UI 实现像素级的控制。这也意味着原本的设计意图可以被完美地执行出来，从而将品牌个性忠实地传达给用户。

三、技术栈

Flutter是由谷歌开发的 Flutter 提出了一种名为 Dart 的新编程语言。但是对于前端js开发者会比较陌生，而对于那些具有 OOP 语言经验的人，比如 C ++ 和 JAVA，可以很容易地学习编码。以下是hello world项目的Flutter实现。由于 Dart 没有模板、样式和数据文件的分离。因此，代码变得有点难以理解