Tutorials

Snippets

Search

Tags

Subscribe on Youtube

Run Flutter Web Without The Errors

Cover image

This morning as I woke up I was extremely excited for the Flutter Announcements that happened overnight (for me). First thing I looked for was Flutter Web which I found 😁

I Followed all the getting started instructions but then ran into some issues. I'm going to detail my issues and how I solved it in hopes that it helps you reading this. I'll go over the setup process and then add the errors in that I received in between.

Here are the steps you have to follow to get Flutter Web running (I'm using windows)

  1. Upgrade Flutter to the latest
  2. Activate the webdev package
  3. Ensure your path points to all the correct directories (3)
  4. Clone the webdev repo and run hello world

To setup everything we start up upgrading Flutter to make sure we're on a version > 1.5.

flutter upgrade

To install the webdev package, which provides the build tools for Flutter for web, run the following:

flutter packages pub global activate webdev

This is where I experienced most of the problems. When I followed the steps laid out in the readme of the repo but ran into a few errors. This first one was the webdev command not being recognized. Even though it had all the paths that were mentioned added.

Flutter Web command error

I was getting this in VS code so I opened a new powershell window and got the same thing. I added two paths to my environment variables

C:\src\flutter\.pub-cache\bin
C:\Users\User\AppData\Roaming\Pub\Cache\bin // %APPDATA%\Pub\Cache\bin

Then ran the webdev serve command in a new powershell in the hello_world repo. This time I didn't get an error. Instead I got 'dart' not recognized and 'pub' not recognized. So I figured the webdev is executing dart and pub as commands and need the dart-sdk bin in the path (which I didn't have).

So I added

C:\src\flutter\bin\cache\dart-sdk\bin

To my path as well. Once this was complete I could serve hello_world.

Clone this repo, navigate to examples/hello_world

In the repo run

flutter packages upgrade

then run

webdev serve

And that's it. Hopefully no one runs into this.

Checkout and subscribe to my Youtube Channel. Follow me on Instagram for snippets and day-to-day programming. Checkout all the other snippets here. You might find some more Flutter magic.

Also check out

Cover image

Flutter Web Advanced Navigation

In this tutorial we go over the navigation setup for web development

Link
Cover image

Flutter Web Hover and Mouse Cursor

In this tutorial we will be adding the basic hover functionality found on most websites

Link
Cover image

Flutter API integration

In this tutorial we add our Provider state management solution and do some api integration

Link