Flutter 2.0 working good and i successfully run web app by calling
flutter run -d chrome
but when generated build using flutter build web it build successfully but the output is not working in web browser. it is showing white screen only
Issue fixed by changing <base href="/"> to <base href="./">
Similar problem occurred in angular 2 beginning time
Related
I have been using Flutter Web --web-renderer canvaskit for a project for a long time and it has always worked fine. But today after I update a small change of code, it suddenly broke. It still works fine in debug mode, but when I upload to firebase hosting, in the live server, the screen stuck in splashscreen.
I tried both chrome and Safari on Mac the same issue. If I switches to --web-renderer html, the problem goes away. I have been using flutter_native_splash and I noticed it changed my index.html. However, I have been using it for a while and there was never a problem with Flutterweb. I did not update any package. Does anyone know anything about related issues? I am using Flutter 3.3.10 and Flutter doctor has no problem. As the code runs well, I don't know how to debug the live server. Thanks for any help!
use --web-renderer html insted of --web-renderer canvaskit
I created a flutter web application,
and I finished building it with the command ..
flutter build web --release ,
and then transferred it to a local server ,
The site does not work unless it is connected to the Internet ,
I want the site to work without an internet connection ,
As I work in an organization and some users do not have internet permissions .
Please, I want a solution to this problem .
Thanks
The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.
There are multiple solutions for that. The easiest being to use the html web-renderer:
flutter build web --release --web-renderer html
this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.
Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:
<script>
window.flutterConfiguration = {
canvasKitBaseUrl: "/canvaskit/"
};
</script>
This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.
Some sources for more informations:
flutter web-renderers
The same issue but on github
Making Flutter offline capable
Download and set locally from asset policy for your web application
Add link to local Canvaskit as bellow :
flutter build web --web-renderer=canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/
To make it work for a dev build, I incorporated Spanching's answer above in the following steps.
Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
Run: flutter pub get to download packages per pubspec.yaml
If you're using build runner: dart run build_runner build --delete-conflicting-outputs
At this stage you should have a clean /build folder (I also have an ios sub-folder as I'm also developing for iOS)
Run: flutter build web
At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/
Then:
Open index.html under /web (note - do not open the one under /build/web)
Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that's already there.
Run your project in deubg mode (with Wifi turned off).
Although there is a valid manifest.json and <link rel="manifest" href="manifest.json"> in the head tag, chrome shows No Manifest Detected, service workers are installed successfully and http://127.0.0.1:8080/manifest.json is fine and accessible, but chrome not even requesting the manifest.json file! this is a flutter project which currently build for web using flutter build web --release
Finally I figured out the bug was introduced by flutter_native_splash which added some picture tag to the root of html page which caused the chrome not requesting the manifest.json, so moving the picture tag to body solved the issue.
https://pub.dev/packages/flutter_native_splash
When I Build Final Flutter Web Project then when i run this project on Chrome using Xampp this is stuck at White Screen Does Not Show Anything. While When I am run this in debugging mode this works perfectly.. Please Help Me.
Clean the previous build using flutter clean.
run flutter build web --release.
check if it is running properly in release mode using flutter run --release,
Select your browser here.
use your build from your_project/build/web.
I have created a project using flutter web but after generating the release build, it works fine on desktop browsers but displays a blank (white) page on mobile browsers.
Note that: I also have tried url_stratergy and I am using Flutter version 1.26.0-17-pre. Below is the output of my flutter doctor
I have generated the release build using the following command:
flutter build web --release
You can also visit the website to verify the issue at HerAmigo.
Looking forward to your help and suggestion!
Thanks
Ayesha Iftikhar
Please try running this command. This will repair and fix the pub cache.
flutter pub cache repair