Flutter，毫无疑问是今年最火的技术方向，作为最早接触Flutter的一批开发者，从入门，到现在，我也经历了各种阶段，从入门时的无从下手，到略懂之后被各种蜜汁Widget弄的焦头烂额，到现在可以建立起Flutter的整体知识结构，整个过程实际上是非常痛苦的，这跟Flutter的设计思想有关——一切皆组件，这虽然是一个非常好的设计思路，但是茫茫多的Widget，会让开发者陷入泥潭无法自拔，很难建立起Flutter的知识架构。
在我的Flutter群中，经常有很多初学者在群里寻求Flutter的入门之道，虽然Flutter的官方文档非常完善，社区里面各种Flutter的Demo也非常之多，但是，恕我直言，基本没有一个是可以很好的帮助开发者建立Flutter知识架构的，今天，我就来分析下，初入门的Flutter修仙者究竟需要一个怎样的Demo。
1什么是好的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应该具有的特点：
-
良好的演示效果
-
简单明了的代码
-
好看的界面设计
这些东西虽然看起来简单，但是真要做好，实际上也是很难的。
2那些不那么好的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
3flutter_dojo
设计思路
flutter_dojo的设计主要围绕下面三个部分展开：
-
良好的演示效果
-
简单明了的代码
-
好看的界面设计
整个项目的代码都以上面几点作为目标，代码力图简洁，不使用复杂的架构设计和抽象，每一部分的演示代码几乎都可以单独使用，同时尽可能的美化UI。
Widgets
Widgets部分的设计思路是为了演示Flutter中茫茫多的Widget的具体使用场景和功能，虽然只使用Flutter提供的一些基本Widget，已经可以实现大部分的界面、功能开发，但是，了解更多的Widget，可以让开发者的开发思路更广，使用更加合适的Widget来完成合适的开发场景。
UI Pattern
UI Pattern部分的设计思路是为了帮助开发者了解如何使用Flutter来拆分大部分APP中的界面模板，通过Flutter实现一个个UI组件，来组合成完整的Flutter界面。
Develop UI Kit
Develop UI Kit部分的设计思路是为了帮助开发者掌握Flutter中的一些常用的工具类的使用，让开发者了解Flutter的布局、测量以及常用的UI工具，为更好的使用Flutter组件打好基础。
Animations
Animations部分的设计思路是为了让开发者对Flutter的动画有一个完整的认识，针对不同的场景使用不同的动画方案，同时，对大部分常见的动画场景进行梳理，完成动画场景的归类。
Back-end Util
Back-end Util这部分主要是针对Flutter中的非UI场景知识点进行的梳理，包括数据持久化、解析、状态管理等等。
展示界面
所有的展示界面，都以演示效果为目的，展示该Widget最主要的属性，并通过实例演示更改属性后的效果，举例如下。
修改对应的属性后，可以直接展示修改效果，从而了解到该属性的作用。
同时，Demo代码可以直接查看。
而且代码也可以直接分享出来，分享出来的代码几乎是可以直接Copy使用的代码。
Widgets
Widgets部分包含了Flutter官方Category中的几乎所有Widget，是的你没看错，按照官网的Category划分，穷举了官方列出的所有Widget，同时也新增了一些未出现在Category中，但却很常用的Widget。
在每个Category中，都按照A-Z的顺序展示Widget。
UI Pattern
UI Pattern部分包含了APP中常用的界面开发模板元素，例如APPBar、Banner、Login、Setting等等，在UI Pattern中，开发者可以找到各自分解的UI元素，了解如何使用Flutter来构建这些UI组件。
在UI Pattern中，我分类列举了很多不同的模板类型。
Develop UI Kit
Develop UI Kit列举了UI开发中的一些常用工具类和开发模板代码，开发者可以使用这些工具类来完成一些UI功能开发。
在Develop UI Kit中，按照A-Z对相关代码进行了排列。
Animations
由于动画在APP开发中的重要性，这里特地将Animations作为一项单独列出。开发者可以在这里找到不同的Animation开发模式，了解不同的Animation使用方法。
在Animations中，同样是根据不同的功能进行了划分。
Back-end Util
Back-end Util中列举了非UI的一些Flutter知识点。
Flutter不仅仅是一个UI跨平台框架，同样是一个完整的APP开发框架，所以，这里列举了除了UI开发之外的一些功能。
更多的一切都写在Readme里面了，欢迎大家点击链接去看下，也希望能帮助到广大Flutter开发者。
原文作者：徐宜生
原文链接：https://github.com/xuyisheng/flutter_dojo