I have built a flutter app and it runs great on Anddroid. I have build the web version of this app and deployed it on a web server. When I try to run the web app I get a blank screen.
I have followed some of the solutions I have come across on the internet. They mostly say change the < base href = “/” /> line but none of the changes work.
I don’t think the script inside the index.html file is being run.
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="./" -->
<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="deal_diligence">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>Deal Diligence</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
const serviceWorkerVersion = "4147691921";
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>Hello Deal Diligence
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
},
onEntrypointLoaded: function(engineInitializer) {
engineInitializer.initializeEngine().then(function(appRunner) {
appRunner.runApp();
});
}
});
});
</script>
</body>
</html>
Here is the directory structure on the web server:
public_html/index.html
Here is the main.dart file:
import 'package:deal_diligence/firebase_options.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:deal_diligence/screens/login_screen.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:deal_diligence/Services/firebase_api.dart';
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp(
options: DefaultFirebaseOptions.currentPlatform,
);
await FirebaseApi().initNotifications();
runApp(const ProviderScope(
child:
DealDiligence())); // This allows the entire app to use River_Pod for state management
}
class DealDiligence extends StatelessWidget {
const DealDiligence({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: LoginScreen(),
);
}
}
I do connect to a Firebase database if that makes a difference. I have setup a web project on the Firebase console.
Why is my initial screen blank? Is there any other code you need to see in order to help me? Please let me know.
Thank you