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
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.
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.
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.
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.
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
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:
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.
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.
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.
Errors suck. It's time to hit the project with the Fix-It Felix hammer.
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.
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...
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.
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.
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.