This project is a Flutter clone of the home page at codewithandrea.com.
It was built to analyze the performance of the same site built with Flutter web vs HTML+CSS+JS (see the performance comparison below). But it also runs on desktop and mobile.
A Flutter web build is hosted here:
I've also built the same with the --wasm option:
Note: The Flutter web app has been tested to work on Chrome and Safari. On Firefox, WebP images don't seem to load and sometimes CanvasKit crashes with an "out of memory" exception.
- Responsive navigation header on desktop, tablet, mobile
- Page intro
- Featured tutorials (cards)
- Flutter courses (cards)
- Testimonials section
- About section
- Email signup at the bottom
- Site footer
This project is not meant to be a complete website, but only a UI clone.
As such, buttons and links don't do anything when clicked.
Furthermore, only the dark theme has been built (while the full site supports light theme also).
This prototype has been built in less than 10 hours. While the UI has been broken into small widget classes, this code is not production-ready.
As specified in the Flutter web renderers page, the app can be built with three different modes:
# default option (auto)
flutter build web --release
# html renderer
flutter build web --web-renderer html --release
# canvaskit renderer
flutter build web --web-renderer canvaskit --releaseAdditionally, wasm is also supported:
# wasm (experimental)
flutter build web --wasm --releaseThe tests below were run with both the HTML and CanvasKit renderers.
I have deployed this clone as a Flutter web app and compared it with my main site using PageSpeed Insights and WebPageTest.org.
You can find all the results in this video & article on my site:
You're welcome. 😎