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

user_8144311 0
Viewed 3454

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
flutter-web flutter
3 Answers

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/"
  };

...
user_81443110

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.

user_9406100

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=./
user_100760410
Related