阅读 689

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中的截图。

file

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

再看下面几张图。

file

还有这些。

file

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

再来看看下面这张。

file

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

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

我想做一个好Demo

那么它来了:

https://github.com/xuyisheng/flutter_dojo

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

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

关注下面的标签,发现更多相似文章
评论