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

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

往期


上期回顾


上期主要实现了主题切换,通过StreamBuilder来动态的切换ThemeData,最终达到效果。

本期内容


  • Markdown文本展示
  • 博客列表实现

UI 效果


image.png

image.png

image.png

image.png

两种主题展示效果

  • 示例  提供简单的使用案例,帮助你初步了解该框架的使用方法
  • 博客  提供高质量的博客,通过博客的学习,能更好的掌握,并避免不必要的坑,博客分了左右两层,右边内容展示的博客推荐位,推荐比较厉害的博主,希望你喜欢,目前该功能策划中,预计之后的版本会完善逻辑

示例代码实现


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_markdownflutter_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内容。

image.png

  • 源码部分目前是跳转至github,下期做下跳整,源码将展示对该框架的源码分析,标题部分将承载跳转至github的责任
  • 示例部分,博客部分不断的加入新的进来
  • 博客部分新增自我推荐入口,来收集你认为的对该框架解释的好文章

结束


网站jetpack.net.cn,欢迎常来,也希望能在你学习Flutter的道路上提供一丢丢的帮助。


目录
相关文章
|
4月前
|
Web App开发 前端开发 JavaScript
Web开发者必收藏的10个实用网站,你还没收藏吗?
将这些网站收藏起来,定期访问,使它们成为您日常工作的一部分,助您在快速发展的 Web 开发领域保持领先。
184 2
Web开发者必收藏的10个实用网站,你还没收藏吗?
|
3月前
|
人工智能 搜索推荐 PHP
PHP在Web开发中的璀璨星辰:构建动态网站的幕后英雄###
【10月更文挑战第25天】 本文将带您穿越至PHP的宇宙,揭示其作为Web开发常青树的奥秘。通过生动实例与深入解析,展现PHP如何以简便、高效、灵活的姿态,赋能开发者打造动态交互式网站,同时不忘探讨其在新时代技术浪潮中面临的挑战与机遇,激发对技术创新与应用的无限思考。 ###
49 1
|
3月前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
|
4月前
|
前端开发 Java 程序员
技术博客入门与Markdown技术的运用
技术博客入门与Markdown技术的运用
34 1
WK
|
3月前
|
安全 Java 编译器
C++和Java哪个更适合开发web网站
在Web开发领域,C++和Java各具优势。C++以其高性能、低级控制和跨平台性著称,适用于需要高吞吐量和低延迟的场景,如实时交易系统和在线游戏服务器。Java则凭借其跨平台性、丰富的生态系统和强大的安全性,广泛应用于企业级Web开发,如企业管理系统和电子商务平台。选择时需根据项目需求和技术储备综合考虑。
WK
173 0
|
5月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
102 19
|
5月前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
115 11
|
6月前
|
存储 前端开发 搜索推荐
Web前端网站(三)- 记事本
【8月更文挑战第8天】多种颜色搭配的动态粒子背景特效(粒子会随着鼠标的移动进行吸附,好看又好玩),左右摆动的文字特效,并且使用localStorage进行数据的持久化存储,使记事本的内容可以长期的保存在浏览器中,功能包括添加留言、显示留言、删除留言。每一行代码都有详细注释~~~大家可以尽情创作
91 5
Web前端网站(三)- 记事本
|
6月前
|
前端开发 搜索推荐 JavaScript
Web前端网站(四)- 音乐播放器
【8月更文挑战第9天】页面整体色调背景采用柔和渐变的方式呈现,与主页面的“毒药水式”色彩搭配形成了强烈的对比;周边花瓣缓缓飘落到水面之上形成涟漪。整体给人一种温馨、浪漫的感觉,还可以通过中间的3个按钮来控制音乐的切换和播放效果。每一行代码都有详细注释~~~大家可以尽情创作
67 2
Web前端网站(四)- 音乐播放器
|
6月前
|
Dart 前端开发 Java

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
  • 6
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
  • 7
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
  • 8
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    flutter开发中Use ‘const’ with the constructor to improve performance. Try adding the ‘const’ keyword to the constructor invocation.报错如何解决-优雅草卓伊凡