导读

最近在写Vue跨平台系列，有同学提出Flutter才是未来，这点我不否认，而且十分赞同。Flutter目前的生态圈已经在飞速发展，相信越来越多的开发者会选择使用。

开始之前

前端的学习Flutter之前，建议最好了解下javascript的面向对象开发，否则直接上手会有点吃力。当然如果你有React的开发经验，那么你就会轻松很多，因为Flutter的设计上有很多理念和React是相同的。

Flutter特别之处

在说Flutter之前，首先ReactNative、NativeScript、Weex 要登场下。这三种框架都是采用js引擎方式和原生通信，最终都是采用原生的UI系统，让js最近几年在native端火爆了起来。但是唯一的痛点还是没有解决，那就是性能，所以呢，ReactNative和Weex官方目前都在重构自己的js引擎，目的也是为了解决性能问题。回来在看看Flutter，完全独立设计，采用了Skia引擎，UI系统完全重写，不依赖原生平台的UI层，仅仅使用了Android、iOS系统的opengl低层接口，这使得Flutter从诞生起就赢在起点了。当然这也有不足之处，目前原生的很多功能或者第三方sdk都没有对Flutter的支持，这个也是初学者的一个难点。

前端如何转Flutter

• html

1. 构成：html有大量的div等标准web组件构成；Flutter则有Widget的代替了web组件
2. 写法：html界面采用xml方式布局；Flutter界面目前只能通过Widget对象嵌套

• css

1. 构成：html的style采用css标准，使用简单明了；Flutter则用组件的相关Style类代替，而且有时候要分开多个Style去完成css的一个样式
2. 写法：html的style写法采用css标准，简单明了；Flutter目前只能通过Style对象或Widget属性去合作完成

因此前端的同学基本都能够找到相关的映射写法，Flutter在设计的时候还是考虑过web开发者。

要想快速学习Flutter，大家还是要从思想上去接受，结合自己的实战经验，相信很快就可以入门。

最佳指南

Flutter官方特别人性化，为了不同的开发者，还提供了迁移学习文档

• web：https://flutterchina.club/web-analogs/
• android：https://flutterchina.club/flutter-for-android/
• ios：https://flutterchina.club/flutter-for-ios/
• react native: https://flutterchina.club/flutter-for-react-native/

押注Flutter

我个人认为，前端的同学有时间一定要去学习Flutter。目前，小程序+APP是开发趋势，小程序呢，大家都懂得，上手简单，没挑战，毕竟是一个小生态；APP呢，原生开发逐渐聚焦在特定领域，其他的简单业务初步已经在用跨平台方案替代，这也是现在app原生开发者找工作觉得难的原因所在。

学习资源有哪些

• 官方文档：https://flutter.dev/
• 中文社区：https://flutterchina.club/
• 实战文档：https://book.flutterchina.club/

最后

想做一个好的程序员，就要不停的折腾，不停的试错，不停的重构。

Vue跨平台案例，大家想不想要Flutter代码，如果转发比较多呢，我加班加点也要满足大家^_^