帮你整理一份快速入门Flutter的秘籍

Posted 2021-04-29 鸿洋

上周抽了点时间学了一波Flutter，因为网上资料已经很多了，所以学起来还算轻松，今天我准备以从0开始到学会以下知识点，给你推荐一波资源，提到的文章都是我阅读过的，希望给你一个实际的入门秘籍。

覆盖的知识点：

1. 环境搭建，跑起来helloworld；

2. 认识一些基本的Widget，列表，下拉刷新，tab，按钮，图片等；

3. Dart语言基础语法；

4. Json解析；

5. 网络访问；

6. 自定义绘制效果，canvas相关；

7. 动画入门；

8. 与本地通信，调用Native方法；

9. 接入已有android的项目；

10. 综合案例

实际上，我们仔细考虑一下，掌握以上几点知识，足够入门了；大多数页面，我们知道如何发起http请求，如何Json解析，可以渲染为列表，支持下拉刷新，还可以调用已有的Native方法，有些小情调，还可以玩玩Canvas，实现一些简单的动效。

至于，剩下的知识，通过各种业务去查缺补漏就可以了，你不可能把一个东西学到100分，再开始实践的。

周期也不用担心，其实有Android基础，根据这篇文章贴出的内容，都实践一遍，站在这些作者分享的肩膀之上，几天可能就学完了。

当然了，这只是入门。

环境搭建

• Flutter中文网

  https://flutterchina.club/get-started/install/

关于环境搭建已经非常详细了。

认识一些基本的Widget

• flutter-io.cn

  https://flutter-io.cn/#

嗯，这几篇文章能够帮你初识Flutter，你开始感受到Flutter一些特性。

学习过程中，可以画一些uml图，记录下遇到的Widget。

上面dart的文章也能帮你开始认识dart，不过下面这篇文章介绍的更详细一些。

• Flutter完整开发实战详解(一、Dart语言和Flutter基础

  https://www.jianshu.com/p/533b5b8d2f71

学习一些常见的界面

• Flutter第3天--基础控件(上)

  https://juejin.im/post/5c18d181f265da611f07a128

该文以卡牌形式向你介绍各种基础控件。

非常有意思~

当然你可能更关心下拉刷新、上拉加载，多tab这样的布局：

• ListView下拉刷新与加载更多

  http://flutter.link/2018/05/03/ListView%E4%B8%8B%E6%8B%89%E5%88%B7%E6%96%B0%E4%B8%8E%E5%8A%A0%E8%BD%BD%E6%9B%B4%E5%A4%9A/

• Flutter完整开发实战详解(二、 快速开发实战篇

  https://www.jianshu.com/p/5768a999790d

JSON解析

撸了半天界面了，是时候来认识下Json解析了。

• Flutter json解析

  http://www.wanandroid.com/blog/show/2452

Json解析，送你一个好用的网站：https://javiercbk.github.io/json_to_dart/，等你学会了，会来谢我的。

异步与网络访问

• Flutter实战5：异步async、await和Future的使用技巧

  https://segmentfault.com/a/1190000014396421

• Flutter第6天--异步-IO+网络访问+json

  https://juejin.im/post/5c1cd2426fb9a049a711cb75

可以使用的网络API：

http://www.wanandroid.com/article/list/0/json

链接中的0表示页面，取值为0，1，2，3，4....

到这里，应该可以搭建一个比较丑的列表，支持上拉加载，下拉刷新了。

再识Widget

是时候来仔细的学习下布局了，毕竟我们基础页面的结构已经ok了。

• Flutter第4天--基础控件(下)+Flex布局详解

  https://juejin.im/post/5c1a34f95188253ff1477cfd

这里有对各种控件，以及几个比较重要的容器Column,Row,Flex的讲解。

想不想玩一些花样?

• Flutter第1天--初始分析+Dart方言+Canvas简绘

  https://juejin.im/post/5c1637fe6fb9a049d5196438

可以在Flutter中玩一下Canvas API，和在Android中差别不大。

再简单了解下动画：

• Flutter第2天--Animation动画+粒子运动

  https://juejin.im/post/5c176700f265da61602cd6ff

与本地通信

可能你会遇到一个疑问，我想弹个toast怎么办？

你可以选择依赖一个库：

• fluttertoast

  https://pub.dartlang.org/packages/fluttertoast

你可以在这里搜索各种依赖，供项目使用。

集成进来后，通过源码，你会发现它是利用通信机制，调用的本地的toast方法。

于是你决定要学一波通信方式：

• Flutter如何和Native通信-Android视角

  https://juejin.im/post/5b4c3c9a5188251ac446d915

可选接入项目

嗯，不太建议你太早的去体验Flutter接入已有项目，会发现很多的Flutter VM snapshot must be valid问题，可能会使你泄气。

如果你遇到了，记得check打出的来包里面的assets目录，是否缺少flutter需要的assets文件，找对方向。

可以搞一个复杂点的页面了

把上述所有的放到一起，你就已经有开发完整项目的能力了，可以尝试下下面这个：

• Flutter第7天--字体图标+综合小案例+Android代码交互

  https://juejin.im/post/5c1df995e51d451611220186

不满足的话，可以挑几个Flutter开源项目学习下。

你可以在wananadroid，搜索flutter，携带`项目`标签的都是开源项目。

http://wanandroid.com/article/query?k=flutter

以上是我的真实体验，如果看了某个问题，还有点困惑，根据标题去搜索，一个个攻克就可以了。

Flutter并没有想象中的那么难，上手起来还是很快的。

非常感谢

张风捷特烈的Flutter七日总结：

• Flutter七日总结

  https://www.jianshu.com/p/af674f119eb5

• 恋猫月亮 的Flutter系列

  https://www.jianshu.com/p/42b59b07323d

恩，相信这个流程已经足够帮你入门 Flutter 了~

点右边一波好看不过分吧~

推荐阅读：

如果你想要跟大家分享你的文章，欢迎投稿~

┏(＾0＾)┛明天见！