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群英传