flutter build web - Only showing blank page

Question

Strangely, I am unable to deploy flutter apps via Flutter web since some days. I have not problem running and debugging the Flutter app in a chrome browser via Android studio but once I try

flutter build web

the generated index.html file unter /build/web/ will show a blank page with these errrors: Chrome error messages image

I started a completely new project so the error will not be due to my bad code writing :P

Can somebody help?

Draper

How are you deploying it? – Enlarge

Did you check the line 54 of the html? What does it say? – Lazuli

it registers a serviceWorker with 'flutter_service_worker.js?v=' + serviceWorkerVersion while serviceWorkerVersion initialized as 293056707. Where can I configure the serviceWorker apart from the index.html (haven't changed anything from a blank Flutter project) and what version can I set? When removing the serviceWorker I still have the main.dart.js net::ERR_FILE_NOT_FOUND - Thx in advance :) – Draper

I like to deploy ist with Github pages so basically I want a local index.html-file that directly runs the app – Draper

update: I ran 'flutter clean' and 'flutter pub get' then 'flutter build web'. Now at least sometimes when opening from Android Studio the index.html in /build/web/ can be opened. But when every other time one needs to enter a unsername and a password to open the website... Also, when opening the index.html locally from the explorer/finder, the same errors occur just as before... – Draper

Answer 1

just change to <base href="./"> in index.html after you build the web.

Merci

Answer 2

Try remove .dart-tool folder in your project folder and rebuild your projcet.

I had the same error and changing index.html not worked. I solved it by removing .dart-tool folder in your project folder. After removing it, IDE shows some errors but flutter build web works fine. Here is the origin link. https://github.com/flutter/flutter/issues/61464#issuecomment-924577391

Napoleon

Answer 3

While using flutter build web if it shows a blank page then it is because of the base url missing in index.html . You can Use

flutter build web --release --web-renderer html --base-href ./

Try building web folder again using this code.

Josefinejoseito

For Flutter version 3.13.6, this results in an error: "base-href should start and end with /". – Lautrec

Answer 4

just Clear browsing data in privacy and security if not see any error in the console

Radiotherapy

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Propensity

Answer 5

This is an old question, but it seems to perpetuate (I also crashed into it). So here is what helped me to solve the problem:

The doc says:

Update the <base href="/"> tag in web/index.html to the path where your app is hosted.

In my case, it was htdocs/app, so base href become <base href="/app">, which fix the problem for me.

Sixtyfour

Answer 6

Context

My Flutter web on mobile browsers (not on computers or emulator's browser) starts up the splash screen, following by redirecting to a new route (including usePathUrlStrategy, until here works well.

But then no matter the route and screen widget, it only shows a blank page.

Problem

Debugging the web app running on my Android Chrome via my computer's Chrome developer console via USB chrome://inspect/#devices said:

MissingPluginException(No implementation found for method getSupportedModes on channel flutter_display_mode)

Solution

Delete code associated to that library flutter_displaymode (refresh rate of the phone screen), else use the conditional import method to not import the library incompatible with web.

Here is an example of unrelated to flutter_displaymode, nonetheless, it could help you

// The file of your widget where you use the functionality runned only for web.

import 'logic/common/platform_specific.dart' if (dart.library.html) 'logic/common/platform_specific_web.dart';

...

PlatformSpecificImpl.setPageTitle(title);

// File `platform_specific_web.dart`. On web, it setups up the web page.
 
import 'dart:html' as html;

import 'platform_specific_abstract.dart';

class PlatformSpecificImpl implements PlatformSpecific {
  static void setPageTitle(String title) {
    html.document.title = title;
  }
}

// File `platform_specific.dart`. On desktop and mobile, it does nothing.

import 'platform_specific_abstract.dart';

class PlatformSpecificImpl implements PlatformSpecific {
  static void setPageTitle(String title) {}
}

// File `platform_specific_abstract.dart`

abstract class PlatformSpecific {
  static void setPageTitle(String title) {}
}

Selfstarter

Answer 7

If running in a bash-like terminal, run the following to build and tweak the base href in a single command line. You can also append an scp command to automatically copy the results to your web server.

flutter build web && sed -i '/<base href/s/\//.\//' build/web/index.html

Lautrec

Answer 8

In newer version fo flutter you have to complete the html file because it is incomplete and also add other thing like
'/' same as seen in this youtube video. Remember to write the complete code.

https://youtu.be/DLq36Af6a88?

feature=sharedenter image description here

Westward

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Propensity

Answer 9

Just install "Live Server" Extension on VsCode and open your "web build" project init, then click "Go Live" bottom of the VsCode and enjoy.

i think its need to simulate your system like a host.

Teodor

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center. – Propensity