Why am I doing this ?
I know there’s plenty of tutorials on the web, but all with varying degrees of success. I tried half a dozen to get mine up and running. And, in then end, felt like I’d spent way too much time on something so simple. So here I am, saving your time.
Apart from the fact that you can develop for web, there’s also another reason for as to why you would want to do something like this. App testing. A lot of people whose machines just can’t handle the load of running a full fledged emulator can benefit a lot from something like this. All you need to try your app is a browser ! And browsers aren’t very resource hungry. So it’s a win-win.
Let’s get right into it !
- First things first, do ensure that you’ve got the path to the Flutter bin folder in your user variables, not system variables. Most probably, that’s already done. Best to make sure though.
- Next, find the path to the Google Chrome executable in your computer. If you don’t know where it is, right click on Chrome from the Start menu and click open File Location. This will open up the location of the app shortcut. Repeat the last step once more to get the real path.
- Press Ctrl + L to select the path and and then copy it. Now go to your System Variables and select New. Name the variable as CHROME_EXECUTABLE. Now paste the path you just copied into the path box, and add \chrome.exe at the end. Don’t forget to save before you exit !
Great that’s all done, now we can focus on Flutter for real.
- Open a new Windows Terminal or Command Prompt and type in
flutter channel dev
2. Now you’ve switched to the dev channel. Time to get the dependencies for that channel.
3. Type in
If you’re on Windows, you should see BITS (Background Intelligent Services) kick in and do its thing.
4. You’re almost done. Type in
flutter config --enable-web
And if it says
Setting “enable-web” value to “true”.You may need to restart any open editors for them to read new settings.
then perfect ! Everything in the world is right.
Final Round Up
Just to ensure that chrome is now recognized as a valid device, type in
Once you see this, setup is complete.
Now, to be able to debug straight from the browser head over to the chrome extensions store and find the Dart Debug extension. It looks really shady though. But the point is, it makes life easier, and that’s what you want at the end of the day.
Great ! Now when you create a new Flutter project you should see a new folder called ‘web’. And you should be able to run your projects right in your browser.
Making existing projects web compatible
What about if you already have projects which you coded out before you enabled Flutter for web ? Well, no problem ! Open up the project and its terminal type in
flutter create .
You should see a message saying ‘Recreating Project’, and boom, it’s now web compatible.
Flutter Web is still in its experimental phase. You may experience occasional bugs or crashes.