Code With Andrea – Flutter Clone
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:
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.
Building the app
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 --release
The tests below were run with both the HTML and CanvasKit renderers.
You can find all the results in this video & article on my site:
You’re welcome. ?