Why do I get white screen when building flutter web

Question

I want to build a flutter web app, so I enter 'webdev build' command and after the operation finishes, I open the 'index.html' file located in build directory and it's just a white screen. I tried it on a fresh project and the problem persists. There's no problem during developing.

Here's my flutter doctor output:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17134.766], locale en-US)

[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.3)
[√] VS Code (version 1.35.1)
[!] Connected device
    ! No devices available

! Doctor found issues in 1 category.

Solution 1

You need to run webdev serve command, it'll provide an address like localhost:8080 or 127.0.0.1:8080. I've attached a screenshot after running webdev serve for one of my Flutter Web Project. It says Serving web on http://127.0.0.1:8080 So you need to open that URL in Browser.

---

This answer was written when flutter-web was a separate project and webdev was the way to go for running your app.

Now you can use flutter run -d chrome to run it for Web.

Solution 2

For me seemed to have been a problem with antivirus and running flutter run -d chrome --release solved my problem.

Solution 3

You have to upload your files to the server and put them inside the root folder.

If you want to put them in other folder, you have to edit the "index.html" file to tell hem the folder.

For example: If you upload your files to "test" folder, you have to edit this line of "index.html":

<base href="/">

To

<base href="/test/">

Solution 4

I had the same issue.I used inspect code on chrome and checked console section.So there was error not allowed to load local resource and a Path to some file was like this:

import 'file:///C:/Users/../someFile.dart';

And by changing path to

import 'package:.../someFile.dart'

white screen gone and problem solved.

View more solutions

Comments

[Xoltawn]

Yes, but it just gives a server to do the developing.I need the output files.

[Tirth Patel]

What do you mean by output files? Elaborate please

[Xoltawn]

Oh my mistake,I didn't pay attention to this part from the documentation,"run the application using a static HTTP server.". I was just opening the index.html not using it is server.Thank you bro!

[Tirth Patel]

You're welcome. If my answer helped you then you can mark it as accepted and upvote it. Another tip: if you want to host you flutter web app on GitHub pages then use Peanut plugin, which is hassle free way to achieve the same.

[Xoltawn]

I'm gonna try it out Thanks

[vs.thaakur]

I am running webdev serve command still the url gives be blank screen. Can you please help

[Tirth Patel]

Can you post your pubspec?