Flutter web : Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Question

Flutter web is just showing empty white page in chrome and I get Failed to load resource: net::ERR_NAME_NOT_RESOLVED in console of chrome by using inpect .It's reproducible even with flutter counter app on web.

I have Flutter Channel stable 2.0.2, and Android Studio (version 4.1.0). It's working fine in emulator. how can I solve the problem? error image

I tried following commands in cmd but still have problem :

ipconfig /flushdns
ipconfig /renew
ipconfig /registerdns

• Julia: Please edit your question to add a minimal reproducible example.
• Zahra: there is no error so I can not add any reproducible code.
• Julia: net::ERR_NAME_NOT_RESOLVED is a DNS error. If you show us your code, maybe we can help you figure out what's going on.
• Zahra: I added some code.
• Julia: And what is the base URL?

Answer 1

If you be connected to internet, It will work and no error will occur But This error occurs in flutter web in Offline mode because CanvasKit is not automatically bundled for offline development.

To make it work offline there are two ways:

1- the easy way ( run this code in terminal ):

flutter run -d chrome --web-renderer html

2- the second way ( instructions are mentioned by flutter team ):

• Download (or build) CanvasKit anywhere under the web/ directory of your project.
• Follow these instructions and specify FLUTTER_WEB_CANVASKIT_URL to point to /path/to/bundled/canvaskit/ (if it's in the root of web/ then I think it's just /).
• Include all the necessary fonts in your pubspec.yaml (instructions)

Notes for working offline in release mode:

In release mode, in order to make app work offline, after releasing app with command flutter build web, go to index.html file in build/web then add this code to the script tag:

 <script>
 window.flutterConfiguration = {
 canvasKitBaseUrl: "/canvaskit/"
 };
...

• user3408531: What is the link to download the complete CanvasKit folder? and from where we define and set FLUTTER_WEB_CANVASKIT_URL environment variable? Answers to these questions are not in the instructions. This may help: developer.school/tutorials/…

Answer 2

I ran into this problem when serving the app not from the root of my webserver. I had to specify the <base> tag in web/index.html, then it worked for me.

• Zahra: <base href="/"> in index.html already exists.

Answer 3

Here is the Makefile for it

webrun:
 wasmLocation="$(shell grep canvaskit-wasm build/web/main.dart.js | sed -e 's/.*https/https/' | sed -e 's/\/bin.*/\/bin/' | uniq)"; \
 curl -o ./web/canvaskit.js "$$wasmLocation/canvaskit.js"; \
 curl -o ./web/canvaskit.wasm "$$wasmLocation/canvaskit.wasm"; \
 flutter run -d chrome --release --web-renderer=canvaskit --dart-define=FLUTTER_WEB_CANVASKIT_URL=./