时长一个月的flutter项目工作心得

简介

本篇文章主要是记录小编第一次开发flutter项目中的一些个人心得记录。

小编是前端开发出身，对flutter也是初步认识，所以内容会比较基础，当作是我跟大家唠唠嗑。

如果小伙伴们想学学flutter，建议是先把dart语法了解一遍，小编在一些flutetr群里经常看到有的小伙伴不明白flutter和dart是什么关系，经常会出现提问的问题不知是属于dart的范畴还是flutter的范畴。另外，小编建议刚学flutter的小伙伴可以找一个flutter相关的群聊，可以在上面看看别人是怎么解决一些问题的。

dart官方文档看这：https://www.dartcn.com/

关于项目搭建

flutter开发环境搭建看这

1.https://flutterchi…

2.https://www.jiansh…

其实flutter的搭建在官方文档讲的还是比较详细的，个人建议当下载好flutter sdk并配置好环境变量之后，后续的搭建时不时可以通过flutter doctor指令查看自己的开发环境还欠缺些什么东西。

这里简单提一个小编在搭建flutter环境过程中经常遇到的问题，小编在搭建过程中经常会碰到gradle包安装失败，然后用尽很多网上说的方法最后还是失败。这里小编有个小技巧，小伙伴们可以直接利用android studio打开一个安卓项目，或者可以直接打开flutter的安卓项目，这时android studio会帮我们自动下载gradle的相关文件。如果有这方面困惑的小伙伴不妨可以试试这个方法。

关于第三方插件引入

这里给大家介绍一下flutter中引用第三方插件的姿势。

如何选择合适的第三方插件

小编在项目里经常会引用别人写好的插件。不过，小编会经常遇到百度上同个解决方案有很多类似的插件。这里打个比方，小编想要找一个数据图表的插件，去网上一搜，发现有很多类似的插件，如下图：

除了图片里的其实还有很多类似的，那如何选择插件才比较合适呢?

（1）看人气，看点赞的量。大多数受欢迎的插件首先是插件背后可能有一个强悍的团队或者某位大神在不断的维护，并且能够及时的向网友们进行相应的答疑，这种插件一般都是可以放心食用的；

（2）看插件的最新更新时间。除了看插件的人气之外还要看插件的最新更新时间。flutter在这几年的发展还是比较快的，flutter本身自己在不断的更新，随着更新所带来的可能存在一些老的插件不适合最新的flutter版本，所以在时间方面尽可能能挑选比较新的一些插件进行食用；

（3）看文档详细情况和文档案例。可能有些插件的人气并没那么高，这不排除有些插件刚发布不久还没被大家重视。对于文档写的比较详细和案例比较清晰的，可以在大致阅读完文档之后考虑是否使用；

（4）结合开发需求挑选并改造。对flutter稍微熟悉点的小伙伴在没有找到很完美的插件情况下可以试着下载别人类似的插件去进行改造，但这是在迫不得已下可以这么尝试。

插件版本不要随意改动

当我们成功使用别人的插件之后，不要轻易的去更改项目引入的插件版本。有些插件在开发过程中由于大幅更新之后，会存在前后两个版本的代码不能适用的情况，所以在引用插件之前先查询插件版本，考虑是否引入，在引入之后就不要轻易改动了。

那如何查询插件当前的最新版本呢？

这里有以下两个方法：

1.在flutter pub官网中输入插件名进行查询。

2.可以在github上搜索插件名查询，方法类似在flutter pub中查询。

常用插件介绍

这里给大家种草小编了解的一些常用插件。

Dio库（http请求库）。一般Flutter项目中使用网络请求的方式大致可分为两种，分别是Dart原生的网络请求HttpClient类以及第三方开源的网络请求库。据小编了解的http请求库中Flutter中文网开源的Dio库人气最高。前端开发的小伙伴可能认识axios库，Dio库的地位我个人感觉跟目前axios在前端开发中的地位是一样的。
flutter_ScreenUtil（页面自适应）。关于flutetr的单位小伙伴们在学习之后可以去深入了解了解。一般来说flutter的单位是支持一定的自适应的功能的，但随着现在手机设备的不断更新呢，各种设备的像素比例、屏幕尺寸出奇不穷，flutter在页面自适应方面还是有一定缺陷的。在这样的背景下，flutter_ScreenUtil的出现很好的解决了页面自适应的问题。flutter_ScreenUtil的使用还是比较简单的，看文档就可以快速的上手，还没用上的小伙伴可以尝试尝试。
shared_preferences（轻量级数据缓存）。从flutter pub里可以看到shared_preferences拥有相当高的人气。据了解，在原生的android和IOS里面都会有数据缓存的api。Android端用的是Sharedpreferences来实现对于轻量级数据的缓存,IOS端通常使用NSUserDefaults来实现轻量级数据的缓存，不过对于我这种前端小白来讲不管是原生android还是IOS我都是一窍不通的。要我来操作原生的数据缓存api我也不知道如何下手。不过，在flutter有基于Android和iOS做的三方插件库shared_preferences。这对于不懂原生开发的小伙伴们来说是相当友好的。
flutter_echarts（数据统计图表），syncfusion_flutter_charts（数据统计图表）。这两个都是数据统计图表展示插件。小编只是使用了第一个插件，第二个图表插件的人气值会相对高很多，有兴趣的小伙伴们可以了解它的用法。如果有了解过Apache的echarts的小伙伴们上手flutter_echarts会比较快，其用法跟Apache的echarts的开箱方法基本是一致的。

除此之外还有很多插件小编就不一一介绍了，如果有需要的话大家可以自己冲浪找一找，稍微百度一下都是可以查到的，这里给大家推荐之前看到的一位老哥整理的插件，很齐全，大家有需要的可以自行去大佬的文章里淘淘宝。 Flutter第三方插件汇总。

关于Widget组件配置查询小技巧（看源码）

Flutter给我们提供了一套丰富、强大的基础widget。但是我们在刚开始学习flutter时经常要百度去查各个widget的配置项。打个比方，小编是学前端的，对于css样式比较熟悉，但是到了flutter，我想给Container加个边框，下意识的情况下我可能会这么写：

  Container(
    border: 1,
    borderColor: Colors.pink,
  )

但是事实上这种写法完全是不可行的。小编一开始也不了解，就上百度各种查，查到的结果可能是这样子：

于是在第一次查完之后在短时间内我是记得Container的边框是怎么写的。但是过了一阵子后，我又忘记边框是怎么写的，于是要么我就回头翻代码，要么就上百度再查一遍，这样子反反复复的到处去查，对整个开发过程的效率是非常低的。因此在这样的情况下我学会了一种比较高效率的查询配置的方法：看源码。

可能有的小伙伴觉得看源码不是大佬才做的事情吗，但其实flutter里看一个小部件的配置的源码其实还是比较容易看的。还是以Container为例，我现在要查边框和边框圆角的配置，整个步骤分为以下两步：

Ctrl+左键查看Container的配置
Ctrl+左键查看BoxDecoration的值

Tip：可能小伙伴不明白为什么是BoxDecoration，小伙伴们可以自行打开源码，然后去看decoration的相关内容，一步一步去看源码就会知道为什么是BoxDecoration，但一般源码里都有注释提醒你相关的食用方法。

从动图里我们可以看到当点击到Container源码里面进去我们可以明显的看到Container的配置项。不仅如此，源码里的注释也间接的提醒我们decoration的值要怎么去写。

其实追根到底只是因为页面上的Widget一般都是通过它的构造方法去实例化出来的一个小部件，widget的配置项也只是构造方法上的一个参数而已，当小编渐渐有这个意识之后也开始习惯于通过查看源码去了解每个widget是怎么去配置的。通过以上的方法，举一反三，当遇到配置不知道怎么写时可以看看源码的配置及注释上的信息，一般情况下都可以快速的解决配置的问题。

学习网站推荐

其实小编一开始接触flutter的时候完全是一脸懵逼的状态，这里面有两个很大的原因。首先第一个是语言类型的更换，小编一直以来都是写JavaScript的，了解前端的小伙伴们都知道JavaScript是一门弱类型语言，而dart是一门属于强类型的语言，在语法的编写上有比较大的习惯上的差异。其次是编写页面思维的影响，小编写习惯了web页面，当切换到flutter时很多写法风格都大大改变了，一下子很难适应。

However，作为同样是刚入门flutter的小编，我的建议是，多写写，习惯了就好。可能一开始我们并不知道一个flutter的总体项目代码风格是怎样的，但是网上其实有很多现存的代码案例供我们去学习，多看看别人怎么写的，这对自己入门flutter会有很大的帮助。

这里给大家推荐几个博主，他们的文章写的都还是挺不错的，至少在为期一个月的flutter实战开发中给小编有了很多很多的帮助。

老孟程序员：http://laomengit.com/ 老孟的博客里有300多个组件案例，小伙伴们可以快速的过一遍，大概了解flutter给我们提供了什么widget。后续完全可以当字典来使用。

老孟的flutter微信公众号文章:https://mp.weixin.qq.com/s/d-75qWXhww87TjXQGEkNfA 这里是老孟的微信公众号，里面有不少关于flutter的干货。

路很长~ 这是一位高产博主，也是位大佬来的。小编了解他是从他的百度地图相关文章开始，他还有许多其他flutter新手可能不知道的干货，大家可以去他的博客学习学习。

徐老师徐老师的文章有一些常见的需求场景，小伙伴们可以去看看他的文章，内容比较基础，但很实用。

总结

本篇文章算是小编第一次接触flutter后记忆尤新的一些东西吧，跟大家共同分享分享，也希望对一样刚入门的小伙伴有所帮助。后续小编还会继续给大家分享一些flutter常见的问题，给大家踩踩坑。

此外，学习网站，资料，小编这里有，有需要可以找小编要，大家一起努力。当然小伙伴们藏有学习资料的也不要吝啬，也给小编分享分享嘿嘿嘿。