Flutter Web网站之Markdown展示与博客列表

往期

• 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 componentsList;

  const Blogs({Key key, this.componentsList}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 2,
          child: Column(
            children: [
              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: [
                    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的道路上提供一丢丢的帮助。