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.
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 global 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 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:
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
stagehandin 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
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
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
flutter/material.dart import in
ui/hangman_page.dart as follows:
Yep, we're just adding the
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
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.