Simple games with Flutter Web: hangman

As of September 10, 2019, Flutter Web was fully moved into the main Flutter repo's beta channel. The original article can be found under "Outdated Original Article", and I've updated this article to point at the new simple steps required to run a web app and updated the download to point it at the new update.

For more information on getting Web to work with your projects, see: https://flutter.dev/docs/get-started/web

Download

Visit the GitHub repository to clone the source for this application.

This code was tested with Flutter 1.19.0-4.3.pre (beta channel), Dart 2.9.0.

Enable and Run on Web

First, update to the beta channel and enable web support.

$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web

You can now see web devices under flutter devices, so we can run our code using these targets.

$ flutter run -d chrome

The project will now build for web, launch a chrome window, and start the web app. It's that easy.

For information on how to deploy your web app, see Build and release a web app.

Outdated Original Article

The Technical Preview of Flutter Web was just announced at Google I/O 2019. To celebrate, I've ported the hangman app from our previous tutorial from Flutter to Flutter Web. We had to move things around a little bit, but it was actually quite easy.

The Approach

We're going to make a new dart project (not flutter) for our flutter web app, copy/paste our source around, add "_web" to some imports, then build our application. It's pretty straight forward.

Old Download

Visit the GitHub Repository to clone the source for this application.

This code was tested with Flutter Web Technical Preview (webdev 2.0.4) and Flutter 1.5.4

Setup

Install the flutterweb build tools: flutter packages pub global activate webdev. If you run into issues building additional setup instructions can be found on the [Flutter Web GitHub Repository](https://github.com/flutter/flutterweb), but this command the core of what you need.

Install the dart tools: pub global activate stagehand

Create a new directory for the project and navigate to that directory in your favorite terminal app. Now, use stagehand to create our basic project files: stagehand flutter-web-preview.

Lastly, the hardest part. Run pub get in your project directory to install the dependencies.

NOTE: We can't currently use Android Studio to create a flutter_web app since the dart plugin doesn't have "New Project" support. We can use IntelliJ or VS Code to create a dart project, but it's easier to use stagehand in this instance.

ANOTHER NOTE: We can't use flutter to create a flutterweb app yet, either. The flutter team is currently developing flutterweb on a fork, and are working on consolidating the two code bases. At this point, we have to make a few modifications to our code to get it to work with flutter_web. In the future, it'll be the same code that will work for both.

The Code

Step 1: Copy the "App" code

We're going to just copy the app code directly from our hangman app (which, if you will recall, has the engine code copied directly from Monty's Hangman Repo). Copy everything from the app's /lib directory into our new project's /lib folder.

That was easy. Next.

Step 2: Copy the assets

Create a new directory at /web/assets in our project. Copy the /img directory from the app's /data_rep directory into the new /web/assets directory we just created.

All the code and assets are currently broken, let's fix them up.

Step 3: Make it build

Errors suck. It's time to hit the project with the Fix-It Felix hammer.

Step 3.1: Add the assets to our pubspec.yaml file

flutter:
  assets:
    - img/

It should be noted that the paths in the assets array are all relative to our project's /web/assets directory. Missing assets currently don't throw an error, they just silently fail and never show up.

Step 3.2: Update our imports

Update the flutter/material.dart import in main.dart and ui/hangman_page.dart as follows:

import 'package:flutter_web/material.dart';

Yep, we're just adding the _web there.

Lastly... change the remaining imports at the top of main.dart to be local imports instead of fully qualified package imports.

import './engine/hangman.dart';
import './ui/hangman_page.dart';

It was silly that these were fully qualified imports to begin with, so let's pretend this never happened...

Step 4: Test and Build

Now all that's left is to actually build and serve the app and test it out.

If you followed the additional setup instructions (that I said you didn't need to) and added webdev to your path, then you can simply use webdev serve from the project's directory to start the local test server.

If that gives you errors, or it is not on your path, you'll have to use the longer pub global run webdev serve.

Now you can visit http://localhost:8080/ and play hangman just like we used to do together on our phone.

You can use webdev build to compile everything for deployment on the web. The compiled files can be found in the newly created /build directory.

NOTE: flutter_web, in its current Technical Preview state, isn't ready for prime time, yet. Have fun with it, but please reconsider using it for a production app until it's at least in beta.

ANOTHER NOTE: As noted, in November 2019 Flutter Web was ported to the main flutter project. It is available in the Beta channel. Still not considered ready for prime time, but it's in Beta now.

Summary

As you can see, with very minimal code changes we were able to get our existing flutter app running on the web using flutter_web. Look forward with excitement to more updates to this platform.