困在家里的这些天，我用flutter完成了个人我的博客

开头

想必不少小伙伴们都有写博客的习惯，这其中大部分没法本身自定义博客样式的，应该都和我同样，使用的相似与hexo上各类各样好看的博客模版吧。

应该也有不少小伙伴与我同样，不具有前端开发能力，可是想要从头到脚自定义一个属于本身的我的博客，可到了最后也无从下手。

而不便出门的这些天，无聊的我，躺在床上思考人生的同时，也决定使用flutter web 去完成我这个“蓄谋已久”的计划了。

行动

由于flutter web的不成熟，因此不少第三方库都处于起步甚至缺失的状态。因而我不打算让这个博客有什么花里胡哨的功能，这样会轻松很多。

而在此前，我已经在sketch上完成了博客的初步设计

博客的分类设计也参考了我正在使用的hexo主题

UI肯定后，对照UI进行设计便可。

迁移

界面已经用flutter实现了，但是以前的博客系统和如今用flutter写的彻底不同，如何把以前的markdown文件迁移到如今的博客系统中来呢？

在思考方案的同时，我还对flutter web进行了测试，看一看相似于图片的文件可否跟随项目一块儿打包。

测试后发现，在flutter中对某个文件夹进行声明，好比 assets ，就能够将该文件中的内容一块儿打包了，这点和在移动平台上是一致的。

同时，'dart:io' 库没法在flutter web中正常使用，这意为着没法在web中进行相似于在移动端上的文件操做。

因此我选择经过本地编写dart文件操做代码，来对markdown文件进行批量处理，同时将生成后的文件存入 assets 目录，这样一同发布便可

部署

flutter web编译后的产物要放到哪里呢？

由于以前我使用的 hexo + github page 来部署的我的博客，因此此次就是 flutter web + github page

具体操做能够参考这篇文章：

Flutter Web — Github Actions-Github Pages

结合目前的 github action ，能够很方便的作到推送即发布 & 更新

坑

使用flutter web完成我的博客的期间，的确是由于flutter web自己的不成熟，遇到过很多的问题。

下面就来一一介绍

没法识别 assets 目录中的中文文件

在使用 rootBundle.loadString() 加载 assets 目录中的 中文markdown文件 时,会出现没法识别中文的问题,具体能够查看这个issue：

cannot load assets file starting with "#" from the rootBundle after install

目前看来在 flutter 1.14.7-pre.58 版本这个问题已经获得了修复。

markdwon的展现效果不够好

目前 flutter_markdown 插件对于web端的显示效果不如在移动端上的协调。后续要看开发者是否会进一步去更新了。

字体文件过大

能够明显的看到，我的博客中是使用到了特殊字体的，不一样于英文字体只有26个字母，中文字体的汉字很是多，因此字体文件很是大。这对致使网络不佳的状况下加载速度会慢不少

目前尚未一个比较简便的压缩办法，因此解决办法是加载网页的时候异步加载字体

总结

若是想要把 flutter web 拿去进行生产还为时尚早，由于它的表现还不尽如人意，可是若是作一点简单的东西，仍是可让没有前端开发知识的小伙伴得到极大的知足感。好比像我同样写一个我的博客之类的。

总体感觉就是这样吧，下面是博客地址：

我的博客

而后是github地址，有感兴趣的小伙伴能够多多交流：

flutter-blog