Dojo的设计之初，是为了可以演示Flutter中，多如牛毛的Widget，因此，一个通用的Demo演示界面，就显得很是有必要了，一是能够节省不少通用的代码，二是可让Demo的演示，专一于Demo自己，而不须要考虑其它的东西。android
因此，一个通用Playground，我但愿包含下面几个功能。git
-
代码展现 -
分享 -
路由跳转 -
突出Demo
介于上面的这几个需求，同时参考了官方Demo——Gallery的设计，最终定了下面的设计稿。github
中间的卡片区域，用于演示Demo，做为Demo的Playground。web
上面的工具栏，分别是【返回】、【代码预览】和【分享】。微信
界面实现
这个界面并不复杂，主要是下面Playground的圆角处理。这种裁剪内部Widget的方案，通常来讲有两种方案，一种是经过ClipPath，另外一种是经过Material。markdown
Clip的方案你们应该都比较熟悉，因此这里采用Material的方案来进行裁剪，这种方法你们了解的比较少，实际上Material Design就包含了对图形的处理，因此Material Widget，能够很方便的控制Widget的形状。app
代码实现以下。编辑器
return Scaffold(
appBar: appbar,
body: Container(
color: Color(0xFFE6EBEB),
padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
height: contentHeight,
child: Material(
clipBehavior: Clip.antiAlias,
borderRadius: BorderRadius.vertical(
top: Radius.circular(10.0),
bottom: Radius.circular(2.0),
),
child: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
automaticallyImplyLeading: false,
title: Text(title),
),
body: Container(
margin: EdgeInsets.all(16),
child: widget,
),
),
),
),
);
其中高度的计算以下。函数
final contentHeight = mediaQuery.size.height - mediaQuery.padding.top - mediaQuery.padding.bottom - appbar.preferredSize.height;
其实就是屏幕高度减去Topbar、Bottombar等Widget的高度，除此以外，Flutter SDK还很贴心的封装了一些常量，例如Topbar的高度这样的，以【k】开头，以下所示。工具
这里算是一个国际惯例，Flutter中通常采用kXXXX来表示常量
代码预览
在官方的Demo，Flutter Gallery中，有相似的实现，这里其实是借助Markdown的解析，将代码展现出来，如图所示。
因此，这里有两个部分，一个是拿到代码的String文件，另外一个是将String渲染出来。
参考Gallery中的实现，咱们须要借助两个开源库：
flutter_markdown
syntax_highlighter
一个用于渲染MD，一个用于将代码中的关键词进行高亮，具体的使用，你们能够参考Dojo中的实现。
那么文本从哪来呢，这里就须要使用到Flutter的一个很是重要的特性了，即Flutter能够指定代码做为Assert，咱们在assets的配置中，不只仅能够设置image，一样能够指定代码文件，以下所示。
assets:
- images/
- lib/category/widgets/accessibility/excludesemantics.dart
这样指定以后，就能够经过AssetBundle来获取Assert，从而拿到代码文本了，这是Flutter中的一个很重要的功能。
解决这两个功能以后，代码预览功能就完整了。
分享
Dojo在设计之初就考虑了代码的开箱即用功能，因此分享功能，可让学习者快速将Dojo中的代码，Copy出来使用，因此这里使用了一个插件来实现分享功能，
url_launcher
借助这个插件，就能够在点击时，获取代码文本，从而分享出去，如图所示。
路由跳转
在Dojo中添加新的Demo时，我但愿可以作到只关注到Demo自己，因此在Dojo中的Playground相对因而一个容器，Demo是Playground的child，因此Dojo给Playground配置了一个跳转函数，便可组装Demo和Playground。
buildRoute: (context) => BaseWidget('FlutterLogo', 'lib/category/widgets/paintingeffect/flutterlogo', FlutterLogoWidget()),
每一个新增的Demo只须要配置下buildRoute，传入Title，代码路径和Demo的Widget实例便可。
通用标题
虽然说Dojo的代码都设计为即Copy即用的，可是毕竟是一个演示性的APP，因此，一些辅助性的Widget仍是须要的，例如用于展现Demo标题的两个Widget，MainTitleWidget和SubtitleWidget，如图所示。
其实设计很简单，主要是封装了最基本的标题功能，后期即便须要修改设计，也能够很是方便的进行替换。
通用属性筛选
对于Demo演示来讲，常常会出现不少选项的问题，例如Column的对齐方式，实际上就是一个枚举，每种枚举都有不一样的实现效果，因此一个经过手动更高枚举的Widget，能够简化每一个Demo中的相似的操做。
同时，根据备选枚举的个数，还设计了两套方案，当枚举个数小于等于2个的时候，使用RadioButton的风格，以上则使用下拉选项的风格，如图所示。
代码其实也不复杂，就是经过传入的参数进行选择性构造，代码地址以下。
https://github.com/xuyisheng/flutter_dojo/blob/master/lib/common/multi_selection_widget.dart
修仙
Flutter Dojo开源至今，受到了不少Flutter学习者和爱好者的喜好，也有愈来愈多的人加入到Flutter的学习中来，因此我建了个Flutter修仙群，可是人数太多，因此分红了【Flutter修仙指南】【Flutter修仙指北】【Flutter修仙指东】三个群，对Flutter感兴趣的朋友，能够添加个人微信，注明加入Flutter修仙群，或者直接关注个人微信公众号【Android群英传】。
感兴趣的朋友能够加我微信【Tomcat_xu】，我拉你入群。
项目地址：
https://github.com/xuyisheng/flutter_dojo
- END -本文分享自微信公众号 - Android群英传（android_heroes）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。