Run Flutter Web Without The Errors
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)
- Upgrade Flutter to the latest
- Activate the webdev package
- Ensure your path points to all the correct directories (3)
- 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.
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.
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
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
And that's it. Hopefully no one runs into this.
Also check out
Flutter Web Advanced Navigation
In this tutorial we go over the navigation setup for web development
Flutter Web Hover and Mouse Cursor
In this tutorial we will be adding the basic hover functionality found on most websites
Flutter API integration
In this tutorial we add our Provider state management solution and do some api integration