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源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。