Flutter project doesn't open on Chrome

Question

It's been 5 days since I'm struggling with this problem and tried all the solution on StackOverflow but still can't open the app on Chrome : What I have tried. I really appreciate it if you can help with that.

0. I have tried HTML files, chrome opens seamlessly but flutter got problem.
1. Installing live server extension : Errror
2. Flutter run -d chrome : Error
3. side-by-side configuration is incorrect :Installing Visuall c++ update and regedit
4. Changin the chrome path on Launch.json
5. flutter channel is stable and did upgrgrade .

error 1 :

CreateProcessW failed 14001
ProcessException: The application has failed to start because its side-by-side configuration is incorrect. Please see the application event log or use the command-line sxstrace.exe tool for more detail.

  Command: C:\Users\abc\AppData\Local\Google\Chrome\Application\chrome.exe --user-data-dir=C:\Users\abc\AppData\Local\Temp\flutter_tools.b64ea32a\flutter_tools_chrome_device.7ecc71a0 --remote-debugging-port=13587 --disable-background-timer-throttling --disable-extensions --disable-popup-blocking --bwsi --no-first-run --no-default-browser-check --disable-default-apps --disable-translate http://localhost:13570


Flutter doctor -v

[√] Flutter (Channel stable, 2.0.5, on Microsoft Windows [Version 10.0.19042.867], locale en-US)
    • Flutter version 2.0.5 at C:\src\flutter
    • Framework revision adc687823a (9 days ago), 2021-04-16 09:40:20 -0700
    • Engine revision b09f014e96
    • Dart version 2.12.3

[√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) 
    • Android SDK at C:\Users\abc\AppData\Local\Android\sdk
    • Platform android-30, build-tools 30.0.3
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java       
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Users\abc\AppData\Local\Google\Chrome\Application\chrome.exe

[√] Android Studio (version 4.1.0)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b01)

[√] VS Code (version 1.55.2)
    • VS Code at C:\Users\abc\AppData\Local\Programs\Microsoft VS Code
    • Flutter extension version 3.21.0

[√] Connected device (2 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 90.0.4430.85
    • Edge (web)   • edge   • web-javascript • Microsoft Edge 90.0.818.42

Solution 1

Since flutter doctor is not showing any errors with the environment. It is possible that the error is taking place while the application is starting up or while initializing the plugins.

1. Check the chrome browser if there are any messages displayed on the console 2, Ensure you have set up all plugins as per the instructions given on their website or the pub.dev page.

Firebase in-particular has an extended config which involves adding additional .js files in the index.html of your flutter project. As your project is a web project, check this link for the complete instructions on how to add firebase to your app.

Do try the steps above and let us know if anything changed

Solution 2

First, check in Command Prompt/cmd with this line flutter doctor if run this perfectly. Then,

1. Write in your Android Studio terminal flutter config --enable-web then close your Android Studio/IDE

2. also you can check in cmd flutter devices as this image flutter devices

3. Open your Android Studio then select your browser select your browser

Hopefully solved your problem. Thanks.

Comments

[Rohan Thacker]

Can you update the question with the output of flutter doctor -v

[DAni M]

Yes, Sure . Already done

[Rohan Thacker]

Thank you, does the same issue happen with Edge or is it Chrome Specific? If want a quick work around for this, that is just to get the app to render in the browser you can also try flutter run -d web-server, this will start a server on localhost on a random port.

[DAni M]

Thank you rohan : for flutter run -d web-server : i get this messge : The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow. To hot restart changes while running, press "r" or "R". but flutter run -d edge : just show the splash screen not the pages

[Rohan Thacker]

In the console there should be a url you can use to open the app in the browser. Also did you give it some time? flutter has to download alot of assets and it maybe loading in the background!!

[DAni M]

Yes gave the local host address when click on it . open the chrome just show the splashscreen

[Rohan Thacker]

Can you confirm nothing is loading in the network tab of the browser's inspector?

[DAni M]

Let me check . I just deleted splashscreen but now show a blank screen

[DAni M]

Just check it but there is nothing on it .

[Rohan Thacker]

Let us continue this discussion in chat.

[DAni M]

you were so helpful, brother. I really appreciate what you did .... Yes the problem was I didn't add Sdk to index.html ...... <script src="gstatic.com/firebasejs/8.4.1/firebase-app.js"></…> <script src="gstatic.com/firebasejs/8.4.1/firebase-auth.js"></…> <script src="gstatic.com/firebasejs/8.4.1/…>