Flutter Web Application Not Loading In Mobile Browser - flutter

Question

I have created a mobile application for my business using Flutter and it is published in PlayStore which is working fine.
Later I have converted the application to web-friendly and built it using Flutter Web and hosted it using Firebase Hosting. You can see the website here: https://youmenotes.com/immadekada/bambusa/#/
Now the problem which I am trying to resolve is, the website is loading as per expectation in desktop browsers, but if I try to open this URL using mobile phone browsers, it is stuck in a white screen. No clue on how to resolve it.
Please give me some light on the issue if anyone faced the same.
Thanks!
Note: I have another Flutter Web app (a demo app) that is hosted using the same way, and it is working perfectly alright on both PC and mobile browsers. The URL is this: https://youmenotes.com/immadekada/bambusa/game1/#/

Answer 1

This was happened to me-
step 1: check if it is running fine on local
for that run following command
flutter run -d web-server --web-port 8080 --web-hostname 0.0.0.0
and check form your mobile which is same network as your pc by
entering url <pc's ip address:8080/>
step 2: build web with canvaskit render which is more suitable for mobile brower,
command: flutter build web --web-renderer canvaskit --release and
release it.

Answer 2

Thanks, for spending your time to find a solution for the issue. Here I have found the solution.
It was a simple coding issue that caused the incorrect behavior in mobile browsers!
There were some mobile-only features in my application and which I handled using the following method:
bool isMobile() {
if (defaultTargetPlatform == TargetPlatform.iOS ||
defaultTargetPlatform == TargetPlatform.android) {
return true;
} else {
return false;
}
}
So it was working as expected when running from mobile as a mobile application, and running in a computer as a web application. But when it comes to running it from a Mobile device as a web application, the method returns true since the platform is Android/iOS. And that caused my business logic to misbehave.
I updated the if condition with a proper checking for the web by adding kIsWeb, and the method started to return values properly.
Now the URL is loading correctly in both web and mobile browsers.
https://youmenotes.com/immadekada/bambusa/#/
Thanks, for your time.
Update:
How did I identify the issue?
Using Remote Debugging on mobile devices.
You can navigate to this page on chrome by using the URL chrome://inspect/#devices
Thanks,
Midhun.