往期
- Flutter Web網站搭建教程
- Flutter Web網站之主頁框架搭建
- Flutter Web網站之Jetpack成型
- Flutter Web網站之ScrollView+GridView優化
- Flutter Web網站之最簡方式實現暗黑主題無縫切換
上期回顧
上期主要實現了主題切換,通過StreamBuilder來動態的切換ThemeData,最終達到效果。
本期內容
- Markdown文本展示
- 博客列表實現
UI 效果
兩種主題展示效果
- 示例 提供簡單的使用案例,幫助你初步了解該框架的使用方法
- 博客 提供高質量的博客,通過博客的學習,能更好的掌握,并避免不必要的坑,博客分了左右兩層,右邊內容展示的博客推薦位,推薦比較厲害的博主,希望你喜歡,目前該功能策劃中,預計之后的版本會完善邏輯
示例代碼實現
class Demos extends StatelessWidget {
final String markDownData ;
const Demos({Key key, this.markDownData}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: Markdown(
data: markDownData??markdownData,
selectable: true,
imageDirectory: 'https://raw.githubusercontent.com'),
);
}
}
這里引入了一個框架flutter_markdown
flutter_markdown是flutter版本解析Markdown文本的框架
Markdown是一種輕量級標記語言,它允許人們使用易讀易寫的純文本格式編寫文檔,如果你還對Markdown不熟悉,如果你喜歡寫東西,建議學一學,點擊上面Markdown即可開始學習。
flutter_markdown: ^0.3.5
有了Markdown框架我們就很簡單的展示代碼的示例了。
博客代碼實現
class Blogs extends StatelessWidget {
final List<Components> componentsList;
const Blogs({Key key, this.componentsList}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
Expanded(
flex: 2,
child: Column(
children: <Widget>[
heightBoxBig,
Expanded(
child: ListView.builder(
shrinkWrap: true,
itemCount: componentsList.length,
itemBuilder: (context, index) {
Components components = componentsList[index];
return Card(
child: ListTile(
onTap: () {
launch(components.url);
},
title: textCardTitle(components.title),
subtitle: textCardSubTitle(components.subTitle),
leading: Image.asset(components.leading),
),
);
}),
),
],
),
),
ResponsiveWidget.isLargeScreen(context)
? Expanded(
flex: 1,
child: Column(
children: <Widget>[
heightBoxBig,
Card(
child: Image.asset(blogger),
)
],
),
)
: Container()
],
);
}
}
用Row將頁面橫向排列,用Expanded將頁面三等分,左邊占三分之二,用ListView.builder動態構建列表容器,并用Card+ ListTile展示卡片式的布局,ListTile設置左頭像leading,主標題title,子標題subtitle,并添加點擊事件onTap,實現博客url的跳轉。
源碼
請轉github代碼查看完整實現
ToDo
該部分內容后期慢慢給大家更新,請客觀不要著急,當然你可以參與進來,私聊我就行哦。
示例部準備下期實現,跳轉至詳情頁面,并展示用例。源碼已經完成點擊即可跳轉至github。博客,這里考慮到有很多優秀的大佬,寫過相關技術博客,幫你尋找最優秀的資源。功能設計如下圖新增按鈕。- Tags 部分下期實現,這部分也需要新的UI展現,標簽的功能類似與搜索,提供更快捷的方式查找想要的功能。
- 留言功能設計,在你們使用過程中肯定會有不同的建議,有了這個功能就能知道你們的心聲,所以這也是我們需要的實現的一個功能。
-
優秀的項目推薦,有很多優秀的項目等待著我們去發現,我一個人的能力有限,如果有更多的人來推薦,會不斷豐富我們的Jetpack內容。
- 源碼部分目前是跳轉至github,下期做下跳整,源碼將展示對該框架的源碼分析,標題部分將承載跳轉至github的責任
- 示例部分,博客部分不斷的加入新的進來
- 博客部分新增自我推薦入口,來收集你認為的對該框架解釋的好文章
結束
網站jetpack.net.cn,歡迎常來,也希望能在你學習Flutter的道路上提供一丟丟的幫助。