Code With Andrea – Flutter 克隆
本项目是 codewithandrea.com 网站 **首页** 的 Flutter 克隆版。
它被构建用于分析使用 **Flutter web** 与 **HTML+CSS+JS** 构建的同一网站的性能(请参阅下方的性能比较)。但它也可以在桌面和移动设备上运行。
Flutter web 版本托管在此处
注意:Flutter web 应用已在 Chrome 和 Safari 上进行了测试。在 Firefox 上,WebP 图片似乎无法加载,有时 CanvasKit 会因“内存不足”异常而崩溃。
支持的功能
- 桌面、平板、移动设备上的响应式导航头
- 页面介绍
- 精选教程(卡片)
- Flutter 课程(卡片)
- 客户评价部分
- 关于部分
- 底部有邮件订阅
- 网站页脚
不支持的功能
本项目 **并非旨在** 成为一个完整的网站,而 **仅仅是一个UI克隆**。
因此,按钮和链接在点击时不会执行任何操作。
此外,只构建了 **暗黑主题**(而完整网站也支持 **亮色主题**)。
编码风格
该原型在不到10小时内构建完成。虽然UI被分解成小的Widget类,但此代码 **不** 是生产就绪的。
构建应用
根据 Flutter web 渲染器 页面所述,应用可以以三种不同的模式构建:
# default option (auto)
flutter build web --release
# html renderer
flutter build web --web-renderer html --release
# canvaskit renderer
flutter build web --web-renderer canvaskit --release
下方的测试是以 **HTML** 和 **CanvasKit** 渲染器两种模式运行的。
性能报告
我将此克隆版本作为 Flutter web 应用部署,并使用 PageSpeed Insights 和 WebPageTest.org 与我的主站点进行了比较。
你可以在我网站上的这个视频和文章中找到所有结果
不客气。?
