CouchPuzzler

Flutter is an amazing platform for creating interactive, cross‑platform experiences. You write code in Dart, which compiles into efficient applications that run on iOS, Android, desktop, and now the web. It’s been two years since I last touched Dart, back when I won Google’s Flutter Clock Challenge with my Particle Clock entry. Since then, the Flutter team has shipped tons of new features and improvements to the platform.

I spent the weekend trying out some of these shiny new features. The product became a small multiplayer game that you can play from the comfort of your couch, using smartphones and tablets as controllers.

Run Flutter on the Web

Running Flutter on the web feels oddly familiar. If you’ve been around long enough to remember Shockwave, Flash, or Silverlight, you’ll know how different things are now. Thankfully, those days are long gone. But how is Flutter any different?

What’s different today from back then is that web browsers can now run compiled languages that target WebAssembly (WASM). This means the end-user will never have to install plug-ins in order to run your web application. It’s all ready to go, right in the browser!

Flutter for web compiles to WASM, and runs efficiently in modern web browsers.

When Flutter Web Makes Sense

Should we stop writing HTML and JavaScript now, altogether? We sure can, but probably shouldn’t. Flutter for web shines when building interactive web applications. For regular websites where SEO and accessibility are priorities, traditional web technologies are usually a better fit.

Flutter is great if you’re on a low budget and want to deploy something quickly. You can deploy to iOS, Android, desktop… from a single codebase. Because of the custom-built rendering engine that ships with Flutter, you can be sure that your app looks and runs great everywhere.

Using JavaScript in Flutter

So why bring JavaScript into a Flutter project at all? In my case, I looked around for a native Dart solution for simple P2P communication but found none. My search led me to an NPM package, a JavaScript library called GUN.

Luckily, the Dart web platform supports calling JavaScript functions using the js package. I was able to use this package to call functions in GUN and bubble events in JavaScript to be handled in Dart.

Scan to Play

To start playing, simply scan the QR code on your smartphone or tablet. Up to 8 players can join the game, and it begins once everyone hits Ready. The goal: arrange all numbers in ascending order, starting from 1. It’s a classic sliding puzzle, where you can only move one tile at a time.

Visit couchpuzzler.vercel.app to play! Or watch me demo the game here:

Apologies for the rough production quality—I recorded it quickly, but I wanted to showcase all the features in one go.