Flutter Dojo设计之道——如何打造一个通用的Playground
Dojo的设计之初,是为了能够演示Flutter中,多如牛毛的Widget,所以,一个通用的Demo演示界面,就显得非常有必要了,一是可以节省很多通用的代码,二是可以让Demo的演示,专注于Demo本身,而不需要考虑其它的东西。 所以,一个通用Playground,我希望包含下面几个功能。 代码展示 路由跳转 突出Demo 介于上面的这几个需求,同时参考了官方Demo——Gallery的设计,最终定了下面的设计稿。 中间的卡片区域,用于演示Demo,作为Demo的Playground。 上面的工具栏,分别是【返回】、【代码预览】和【分享】。 界面实现 这个界面并不复杂,主要是下面Playground的圆角处理。这种裁剪内部Widget的方案,一般来说有两种方案,一种是通过ClipPath,另一种是通过Material。 Clip的方案大家应该都比较熟悉,所以这里采用Material的方案来进行裁剪,这种方法大家了解的比较少,实际上Material Design就包含了对图形的处理,所以Material Widget,可以很方便的控制Widget的形状。 代码实现如下。 return Scaffold( appBar: appbar, body: Container( color: Color(0xFFE6EBEB),