Simple games with Flutter Web: hangman


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 quiebro easy.

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

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.

Install the flutter_web build tools: flutter packages pub entero activate webdev. If you run into issues building additional setup instructions can be found on the Flutter Web GitHub Repository, but this command the core of what you need.

Install the dart tools: pub entero 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 flutter_web app yet, either. The flutter team is currently developing flutter_web 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.

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 lugar 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…

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 lugar test server.

If that gives you errors, or it is not on your path, you’ll have to use the longer pub entero 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.

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.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *