Any idea of how to solve the problem Here
The platform is a flutter web
Add google maps script to web/index.html.
<head>
...
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
See google_maps_flutter_web for details.
Debug using terminal instead of using debug console.
Run this in terminal :
flutter run -d chrome --web-renderer html
Related
I have tried to configure webpack in flutter web, in order use some javascript libraries in flutter(i.e aws-amplify); but I don't understand how I could load the libraries that would be in the node_modules folder, when I execute the flutter run -d chrome command, which launches the application.
I have tried the cdnjs of that library but I can't find it, to be able to reference it in the index.html as
<script src="aws-amplify.js" defer></script>
As you can see in image above, no cdn appears.
Aditional information:
flutter: 2.10.4 (I can't update. I must use this version)
dart: 2.16.2
In VScode, I used to be able to go 'Run' -> 'Run without debugging' and if the 'Web server (web-javascript)' was chosen then the Flutter app would open in debug mode in Chrome. This used to open a new Chrome window for the app to be displayed in. I'm not sure what I've done but this no longer works. I now get the message below showing in the debug console. I have tried to go to the localhost link in Chrome but I just get a blank screen and no errors in the Chrome console. I've tried downloading the Dart extension in Chrome but this doesn't help.
Launching lib\main.dart on Web Server in debug mode...
Waiting for connection from Dart debug extension at http://localhost:51367
So far I have tried reinstalling VScode and Flutter, reinstalling the Dart and Flutter extensions. I've even tried to uninstall VScode and remove all the extension and settings files that get left behind (like mentioned here). I've set Flutter up as the Flutter website says every time but none of this has helped and I have no idea what has gone wrong. Could anyone help?
In case it helps, here is the Flutter doctor output:
Downloading android-arm-profile/windows-x64 tools... 1.7s
Downloading android-arm-release/windows-x64 tools... 0.8s
Downloading android-arm64-profile/windows-x64 tools... 1.2s
Downloading android-arm64-release/windows-x64 tools... 1.3s
Downloading android-x64-profile/windows-x64 tools... 2.2s
Downloading android-x64-release/windows-x64 tools... 1.0s
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 1.20.0-7.3.pre, on Microsoft Windows [Version 10.0.18362.959], locale en-GB)
[√] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] VS Code (version 1.47.3)
[√] Connected device (2 available)
• No issues found!
The problem for me was in the index.html file located in the "web" folder.
The cause for the error was my <script src="main.dart.js" type="application/javascript"></script> line. It was not at the very bottom of the body tag. Moving it to the bottom fixed the issue.
You might also need to re-check the index.html file in general. The general order inside the body tag should be as follows:
1-
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('flutter-first-frame', function () {
navigator.serviceWorker.register('flutter_service_worker.js');
});
}
</script>
2- (applies to firebase users) Firebase CDN scripts. ex:
<script src="https://www.gstatic.com/firebasejs/7.20.0/firebase-app.js"></script>
3- (Firebase users)
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "<your api key>",
authDomain: "<your auth domain>",
projectId: "<Your project id>",
messagingSenderId: "<your messaging sender id>",
appId: "<your app id>"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
4- (most importantly) Make sure this line is at the bottom of the body tag
<script src="main.dart.js" type="application/javascript"></script>
I had to rerun flutter config --enable-web after an upgrade to get it working again. Then restart vscode and run.
For me. All I had to do was to make sure that Chrome was the default browser.
if you want to run your flutter web code in a specific port or..., you will see this error.
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.
Please click the Dart Debug extension button in the spawned browser window
you can easily install dart extension from dart-extention and click on it every time you run your code.
Last resort (maybe someone has a better solution). Make a new project and copy the lib across. Add anything needed in the pubspec.yaml
Simply open a new tab with the flutter app URL.
For me, I used an old project that has Android build files. I did the following
flutter config --enable-web
flutter clean
restarting vscode
It solved the problem.
I solved it after upgrading flutter to 3.0v.
flutter upgrade
Just in case anyone has facing this issue in vscode devcontainer, I had a hard time trying to figure out what was happening, I tried everything, flutter clean, forwarding port in devcontainer. It just happened that the version of flutter that i was using had the issue. I was using 3.6 and change to 3.9, everything is working right now.
I was getting a white blank screen and debug console said this
Running "flutter pub get" in flutter_application_1...
Launching lib/main.dart on Web Server in debug mode...
lib/main.dart:1
Waiting for connection from Dart debug extension at http://localhost:42207
The web-server device requires the Dart Debug Chrome extension for debugging. Consider using the Chrome or Edge devices for an improved development workflow.
Please click the Dart Debug extension button in the spawned browser window
flutter run -d web-server in cmd line worked for me though I have to press 'r' manually to reload
If running on the web check the web console. I had a js function that double declared "index".
flutter build web will build my flutter app with obfuscation and minification.
I want my error stack to be readable though.
How should I modify the command?
Try:
flutter build web --profile --dart-define=Dart2jsOptimization=O0
See:
https://github.com/flutter/flutter/blob/720dff6a94bd054e82ec4bf84b5cb802bbc52ddd/packages/flutter_tools/lib/src/build_system/targets/web.dart#L238-L239
There's an issue on github for this feature, feel free to upvote ;)
https://github.com/flutter/flutter/issues/96283
This is a old post, but I found the answer.
If you build the app with this line:
flutter build web --profile --source-maps
Then when you print a stacktrace, you'll get something like this:
Exception: Hello
at Object.wrapException (js_helper.dart:1123:37)
at _MyHomePageState__incrementCounter_closure.call$0 (main.dart:64:7)
at _MyHomePageState.setState$1 (framework.dart:1114:28)
at _MyHomePageState._incrementCounter$0 (main.dart:57:5)
at tear_off.<anonymous> (js_helper.dart:2099:9)
at _InkResponseState.handleTap$0 (framework.dart:909:26)
at tear_off.<anonymous> (js_helper.dart:2099:9)
at TapGestureRecognizer.invokeCallback$1$3$debugReport (recognizer.dart:253:16)
at TapGestureRecognizer.invokeCallback$2 (recognizer.dart:239:6)
at TapGestureRecognizer.handleTapUp$2$down$up (tap.dart:627:11)
If you use --source-maps with a release build, you will still get the dart file and line number, but the class/method names in the stacktrace will be obfuscated.
And, if you copy the lib directory into the root of built web directory, it will display the source code when you click on the dart file/line number in the stacktrace. Also, you can set breakpoints in the dart code, just like you can do when you do flutter run web.
The only way I have found to do this is to use flutter run -d chrome. We would then need to locate where the files on disk are located.
I want to build a flutter web app, so I enter 'webdev build' command and after the operation finishes, I open the 'index.html' file located in build directory and it's just a white screen.
I tried it on a fresh project and the problem persists.
There's no problem during developing.
Here's my flutter doctor output:
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.5.4-hotfix.2, on Microsoft Windows [Version 10.0.17134.766], locale en-US)
[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[√] Android Studio (version 3.3)
[√] VS Code (version 1.35.1)
[!] Connected device
! No devices available
! Doctor found issues in 1 category.
For me seemed to have been a problem with antivirus and running flutter run -d chrome --release solved my problem.
You need to run webdev serve command, it'll provide an address like localhost:8080 or 127.0.0.1:8080. I've attached a screenshot after running webdev serve for one of my Flutter Web Project. It says Serving web on http://127.0.0.1:8080 So you need to open that URL in Browser.
This answer was written when flutter-web was a separate project and webdev was the way to go for running your app.
Now you can use flutter run -d chrome to run it for Web.
You have to upload your files to the server and put them inside the root folder.
If you want to put them in other folder, you have to edit the "index.html" file to tell hem the folder.
For example:
If you upload your files to "test" folder, you have to edit this line of "index.html":
<base href="/">
To
<base href="/test/">
I had the same issue. I was in stable channel and doing below solve the issue:
flutter clean
flutter pub get
flutter pub cache repair
I hope solve your problem.
I had the same issue.I used inspect code on chrome and checked console section.So there was error not allowed to load local resource and a Path to some file was like this:
import 'file:///C:/Users/../someFile.dart';
And by changing path to
import 'package:.../someFile.dart'
white screen gone and problem solved.
I didn't pay attention to this part from the documentation,"run the application using a static HTTP server.". I was just opening the index.html not using it is server.
For me I was in master channel and doing below solve the issue:
flutter channel dev
flutter upgrade
flutter run -d chrome
just run flutter config --enable-web in your command line and close your editor and after run the app again
I had the same issue. I was in master channel and doing below solve the issue:
flutter clean
flutter pub get
flutter pub cache repair
I had the same problem with my app running as a blank page in Chrome. I've fixed it by re-creating a project with flutter create .:
move your lib directory and pubspec.yml file to a safe place.
then, delete the rest of the files and directories in your project directory.
run flutter create ..
move back in those files from step 1.
form me was to replace
<base href="$FLUTTER_BASE_HREF">
to
<base href="">
in index.html file
I have been trying to call the files from the server side for phonegap for ios.But deviceready function does not fire in cordova 2.8.0 and cordova 2.7.0 while remote loading.
If you run it on device, paths of your js are wrong.
Use relative paths, I read that absolute paths are difficult to get with iOS.
So something like this (just a sample) :
<script type="text/javascript" charset="utf-8" src="../cordova-2.7.0.js"></script>
<script type="text/javascript" charset="utf-8"src="../js/index.js"></script>
Anyway, if you want more help, please give us more details of your issue (description, error message, code, ...)
By the way, have you any error message ?