Flutter修仙指南——初学者到底需要怎样的Demo

Flutter，毫无疑问是今年最火的技术方向，作为最早接触Flutter的一批开发者，从入门，到现在，我也经历了各种阶段，从入门时的无从下手，到略懂之后被各种蜜汁Widget弄的焦头烂额，到现在可以建立起Flutter的整体知识结构，整个过程实际上是非常痛苦的，这跟Flutter的设计思想有关——一切皆组件，这虽然是一个非常好的设计思路，但是茫茫多的Widget，会让开发者陷入泥潭无法自拔，很难建立起Flutter的知识架构。

在我的Flutter修仙群中，经常有很多初学者在群里寻求Flutter的入门之道，虽然Flutter的官方文档非常完善，社区里面各种Flutter的Demo也非常之多，但是，恕我直言，基本没有一个是可以很好的帮助开发者建立Flutter知识架构的，今天，我就来分析下，初入门的Flutter修仙者究竟需要一个怎样的Demo。

什么是好的Demo

wiki上对demo的定义是：a demonstration of a product or technique。说的很清楚，就是对这门技术或产品的演示，Demo是初学者或者说是初次使用者了解产品、技术的第一通道。就跟人与人见面的第一印象一样，Demo从很大程度上决定了这个产品推广和宣传上的好与坏。

那么一个好的Demo究竟需要一些怎样的特点呢？

首先，一个好的Demo需要将这门技术的使用细节和使用方式演示清楚，这里要注意的是，是演示，是将这门技术的功能展示出来，这是Demo的核心，所以它的第一个特点就是——具有演示性。

其次，初学者是通过Demo来学习如何使用这门技术，所以Demo的代码必须简洁、易懂，这点非常重要，对于一门新的技术来说，初学者很难快速掌握这门技术的全貌，这就导致在看Demo的时候，很难站在一个全局的角度来看，所以当代码很复杂的时候，就很难理解其中的含义了。

这跟我们平时写代码一样，对于不同类型的代码，需要写不同风格的代码，举个例子来说，对于频繁变化的业务代码，如果在设计的时候套用各种设计模式、各种抽象、继承，看上去好像代码写的很牛掰，但是一旦这个架构无法满足业务的拓展，就会变成噩梦，而一旦接手别人的这种代码，那更是噩梦中的噩梦，所以对于这种代码来说，开发者需要的是写【易于修改的代码】而不是炫技的代码。而另一方面，比如写一个SDK，功能相对集中，业务需要相对稳定，这个时候就需要写【架构良好的代码】，在SDK中，开发者可以使用合适的设计模式，来优化项目的架构，让增加SDK的拓展性和稳定性。

对于Demo来说，我们需要的是第一种代码，即【超级简单的代码】，除了一些必要的工具类或者通用方法外，涉及知识点的Demo演示代码都应该不做任何抽象，直接使用最基本的API调用来进行编写，这样的代码虽然会产生一些冗余，但是极大的增加了代码可读性和可学习性，这才是学习Demo代码的意义，也是Demo的另一个特性——代码简洁、易懂。

再其次，Demo与人一样，好看的皮囊总是让人更喜欢。虽然只是一个演示程序，但起码，要能看的过去吧，不是几个随便的按钮，参差不齐的排列，各种明显的bug。

以上，我们总结了一个好的Demo应该具有的特点：

• 良好的演示效果
• 简单明了的代码
• 好看的界面设计

这些东西虽然看起来简单，但是真要做好，实际上也是很难的。

那些不那么好的Demo

作为一个曾经的Flutter初学者，我也看过社区中的非常多的Flutter Demo，下面就我了解的一些Demo来给大家看看，它们是否是一个好的Demo。当然，所有的评论都是基于上面的几点特性来的，不针对任何开发者。

下面的这些截图都是我平时看的一些Demo中的截图。

这几张图是演示了Flutter中的一些Widget的使用方法，不过看完之后，我感觉还是一脸懵逼，不知道具体是什么意思，这就完全没有体现出演示的效果。

再看下面几张图。

还有这些。

虽然是个简单演示程序，但起码，还是设计一下吧。。。好歹文字要对齐是吧？

再来看看下面这张。

这是Google Sample里面的代码，你可能没看出来这是什么玩意，但你品，你细品，这些都是代码。。。是的，它Demo里面展示的代码，实际上就是这样一行行拼起来的，我真的是第一次看见这么简单粗暴的方法。

说到代码结构，就不能不提Google的官方Demo，Flutter SDK中有很多官方提供的Demo项目，每个项目都非常具有实战意义，但是，我想当不推荐初学者去看，主要是因为一个非常简单的演示程序，Google可以写的非常复杂，这不得不说Google开发者的代码功底十分强大，但是，这也太不照顾初学者的感受了。

我想做一个好Demo

那么它来了：

https://github.com/xuyisheng/flutter_dojo

想知道为什么我觉得这是一个比较好的Demo吗，这一切都写在Readme里面了，欢迎大家点击链接去看下，也希望能帮助到广大Flutter开发者。

欢迎关注我的微信公众号——Android群英传