Enabling Flutter for Web — Real Fast

Image for post
Image for post

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 !

General Setup

  1. 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.
  2. 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.
  3. 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.

Flutter Setup

  1. 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

flutter upgrade

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

flutter devices

Once you see this, setup is complete.

Image for post
Image for post
flutter devices output

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.

Image for post
Image for post
Dart debug extension

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.

Note

Flutter Web is still in its experimental phase. You may experience occasional bugs or crashes.

You read till the end :) Great !

Image for post
Image for post

Love working with Python and Flutter. I also dabble in Arduino and other IOT related projects. Chess is an occasional indulgence. 🔗 https://pranavmanoj.web.app

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store