Flutter Web shows blank page on GitHub deployment-CodePudding

Issue:

I created a web app in Flutter and deployed to the web using GitHub Pages. It worked on the first release (the page was functional, all content worked), and then I made some updates and attempted to redeploy and the web page now shows up blank. The screen is white. No content is displayed, and it only shows the generic title and favicon.

I am able to view the page normally when I run directly from Android Studio using Chrome. It is only when I deploy to the GitHub Pages that the screen is blank.

Released using flutter build web command

What I have tried:

Every combination of modifying removing the line that has been suggested in similar questions.

Removing <base href=...>
<base href="/">
<base href="./">
<base href="/homepage/">
Removing and replacing the entire GitHub repo
Building using flutter build web --web-renderer html

I have read every StackOverflow and GitHub page on this topic and no solution has worked. Looking for any help!

Here is my GitHub repo 1

And here is my index.html file

<!DOCTYPE html>
<html>
<head>
  <!--
    If you are serving your web app in a path other than the root, change the
    href value below to reflect the base path you are serving from.
    The path provided below has to start and end with a slash "/" in order for
    it to work correctly.
    For more details:
    * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/base
    This is a placeholder for base href that will be replaced by the value of
    the `--base-href` argument provided to `flutter build`.
  -->

  <!--<base href="/">-->

  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="sports_app">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="icon" type="image/png" href="favicon.png"/>

  <title>sports_app</title>
  <link rel="manifest" href="manifest.json">

  <script>
    // The value below is injected by flutter build, do not touch.
    var serviceWorkerVersion = '1014210939';
  </script>
  <!-- This script adds the flutter initialization JS code -->
  <script src="flutter.js" defer></script>
</head>
<body>
  <script>
    window.addEventListener('load', function(ev) {
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        }
      }).then(function(engineInitializer) {
        return engineInitializer.initializeEngine();
      }).then(function(appRunner) {
        return appRunner.runApp();
      });
    });
  </script>
</body>
</html>

CodePudding user response：

You can keep the default on index.html

 <base href="$FLUTTER_BASE_HREF">

And you need to change base-href, build like

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

For GitPage it is required to be this format

CodePudding user response：

Please change href in the index.html file to below line then build again.

<base href="./">