往期

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);@overrideWidget 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);@overrideWidget 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的跳转。