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.

score 9 · Answer 1 · answered Aug 07 '20 at 02:56

9

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

answered Aug 07 '20 at 02:56

William Orgeness II

89
1
3

Muaiyed Al-qateefi · Answer 2 · 2021-09-28T22:31:05.510

5

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/">

edited Sep 28 '21 at 22:31

answered Sep 28 '21 at 15:37

Muaiyed Al-qateefi

99
1
3

score 4 · Accepted Answer · edited May 04 '21 at 16:48

4

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.

edited May 04 '21 at 16:48

E_net4

27,810
13
101
139

answered Jun 15 '19 at 20:21

Tirth Patel

5,443
3
27
39

1

Yes, but it just gives a server to do the developing.I need the output files. – Xoltawn Jun 16 '19 at 06:26
What do you mean by output files? Elaborate please – Tirth Patel Jun 16 '19 at 10:49
2

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! – Xoltawn Jun 16 '19 at 13:57
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. – Tirth Patel Jun 16 '19 at 13:59
1

I'm gonna try it out Thanks – Xoltawn Jun 16 '19 at 14:02
1

I am running webdev serve command still the url gives be blank screen. Can you please help – vs.thaakur Jul 23 '19 at 15:25
Can you post your pubspec? – Tirth Patel Jul 23 '19 at 16:35

MD MEHEDI HASAN · Answer 4 · 2021-08-08T04:43:13.513

3

I had the same issue. I was in stable channel and doing below solve the issue:

flutter clean 

flutter pub get 

flutter pub cache repair

I hope solve your problem.

edited Aug 08 '21 at 04:43

answered Aug 05 '21 at 10:07

MD MEHEDI HASAN

2,044
2
19
34

score 2 · Answer 5 · answered Oct 26 '20 at 11:10

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.

score 1 · Answer 6 · answered Jun 16 '19 at 13:58

1

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.

answered Jun 16 '19 at 13:58

Xoltawn

1,445
1
11
17

score 1 · Answer 7 · answered Dec 17 '20 at 15:15

1

For me I was in master channel and doing below solve the issue:

flutter channel dev
flutter upgrade
flutter run -d chrome

answered Dec 17 '20 at 15:15

Blasanka

21,001
12
102
104

score 1 · Answer 8 · answered Jul 28 '21 at 10:07

1

just run flutter config --enable-web in your command line and close your editor and after run the app again

answered Jul 28 '21 at 10:07

David Baruka

121
1
3

score 1 · Answer 9 · answered Aug 05 '21 at 10:19

1

I had the same issue. I was in master channel and doing below solve the issue:

flutter clean 

flutter pub get 

flutter pub cache repair

answered Aug 05 '21 at 10:19

MD MEHEDI HASAN

2,044
2
19
34

score 1 · Answer 10 · answered Dec 27 '21 at 15:38

I had the same problem with my app running as a blank page in Chrome. I've fixed it by re-creating a project with flutter create .:

move your lib directory and pubspec.yml file to a safe place.
then, delete the rest of the files and directories in your project directory.
run flutter create ..
move back in those files from step 1.

score 1 · Answer 11 · answered Jul 14 '22 at 10:32

1

form me was to replace

<base href="$FLUTTER_BASE_HREF">

to

<base href="">

in index.html file

answered Jul 14 '22 at 10:32

s.mhmd

187
10

2

currently, this does not work. Ended with error: Error: The base href in "web/index.html" must be absolute (i.e. start with "/"), but found: ``. – Juanes30 Mar 08 '23 at 04:12

Why do I get white screen when building flutter web

11 Answers11

Linked