Code With Andrea – Flutter 克隆

本项目是 codewithandrea.com 网站 **首页** 的 Flutter 克隆版。

Code with Andrea - Flutter screenshot

它被构建用于分析使用 **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 InsightsWebPageTest.org 与我的主站点进行了比较。

你可以在我网站上的这个视频和文章中找到所有结果

不客气。?

许可证:MIT

GitHub

查看 Github