I have created a project using flutter web but after generating the release build, it works fine on desktop browsers but displays a blank (white) page on mobile browsers.
Note that: I also have tried url_stratergy and I am using Flutter version 1.26.0-17-pre. Below is the output of my flutter doctor
I have generated the release build using the following command:
flutter build web --release
You can also visit the website to verify the issue at HerAmigo.
Looking forward to your help and suggestion!
Thanks
Ayesha Iftikhar
Please try running this command. This will repair and fix the pub cache.
flutter pub cache repair
Related
No project is working in Flutter, I installed the sdk and installed android studio, I am using vs code, my stable version, but I could not solve some kind of error. please help
https://github.com/flutter/flutter/issues/109789
Code value
Try running your flutter web app with html renderer and see if it works.
Paste this command to your terminal:
flutter run -d chrome --web-renderer html
terminal screenshot
I created a flutter web application,
and I finished building it with the command ..
flutter build web --release ,
and then transferred it to a local server ,
The site does not work unless it is connected to the Internet ,
I want the site to work without an internet connection ,
As I work in an organization and some users do not have internet permissions .
Please, I want a solution to this problem .
Thanks
The problem is, that flutter has some dependencies, that can not be resolved when you, as the client, are offline. Mostly consisting of canvaskit and certain google fonts.
There are multiple solutions for that. The easiest being to use the html web-renderer:
flutter build web --release --web-renderer html
this should work for most applications, however it has lower performance than canvaskit, especially with high widget density.
Therefore you can also use canvaskit locally as it is automatically built when you build your release. But you have to set it as base url, by adding the following lines in your index.html:
<script>
window.flutterConfiguration = {
canvasKitBaseUrl: "/canvaskit/"
};
</script>
This makes sure your flutter application uses the local source for canvaskit. However, another problem could be the usage of google fonts, e.g. Roboto, as those often need to be downloaded as well. But you can just add those to the pubspec.yaml explicitly to account for that, like explained here.
Some sources for more informations:
flutter web-renderers
The same issue but on github
Making Flutter offline capable
Download and set locally from asset policy for your web application
Add link to local Canvaskit as bellow :
flutter build web --web-renderer=canvaskit
--dart-define=FLUTTER_WEB_CANVASKIT_URL=/canvaskit/
To make it work for a dev build, I incorporated Spanching's answer above in the following steps.
Run: flutter clean to clean up all build cache (this is important to have canvas kit re-downloaded in step 4 below).
Run: flutter pub get to download packages per pubspec.yaml
If you're using build runner: dart run build_runner build --delete-conflicting-outputs
At this stage you should have a clean /build folder (I also have an ios sub-folder as I'm also developing for iOS)
Run: flutter build web
At this stage you should have a clean /build/web added with a canvaskit folder underneath it. Full path: /build/web/canvaskit/
Then:
Open index.html under /web (note - do not open the one under /build/web)
Add the script mentioned in the answer above to the body of the html file. I just added it above the existing script that's already there.
Run your project in deubg mode (with Wifi turned off).
When I Build Final Flutter Web Project then when i run this project on Chrome using Xampp this is stuck at White Screen Does Not Show Anything. While When I am run this in debugging mode this works perfectly.. Please Help Me.
Clean the previous build using flutter clean.
run flutter build web --release.
check if it is running properly in release mode using flutter run --release,
Select your browser here.
use your build from your_project/build/web.
https://pub.dev/packages/flutter_tex/example (want to run this code for Flutter Web)
Goal: Deploy flutter example on a simple web page for checking latex code output
Expected result: Simple web page where you type Latex on the left and it shows you rendered equations on the right
My experience: 1 day
Current installation: Flutter, Dart, Android Studio, Dart -> Able to "create new Flutter project"
What I have tried: Opened a new flutter project - pasted code in main.dart - did not work (no device device - need virtual device for web deployment?)
In order to run your Flutter project on the web, you must ensure that you have the latest version of Flutter (currently I am running v2.0.2). If you don't have the latest version, just run flutter upgrade in the terminal.
Secondly, you need to check whether the package that you are using also supports the web platform. You can check it by going into the "Scores" tab in the package.
Then, all you have to do is to run the command:
flutter run -d chrome
This will launch the flutter app in the Google chrome browser.
Im totally new to flutter, and would like to try out the official examples gallery: https://github.com/flutter/flutter/tree/master/examples/flutter_gallery
I´ve installed Android studio and have the emulator running, which works great when i start the demo app from VS code.
Problem is, how do i fetch the gallery app, and load it onto the virtual device? The simple guide says I should run these two commands:
flutter packages get
flutter run --release
This does not work, as the terminal throws this error: "Release mode is not supported for emulators." If I instead run
flutter run --debug
it loads up the "You have pushed the button x this many times" standard demo app. And i really cant see how these two commands tells the terminal to get the flutter gallery.
I´ve also tried to change the flutter channel to dev, but this dosent help.
Flutter doctor says everything is OK.
So how do I you try out the official flutter gallery app?
You need to switch to the project directory of the gallery app first
cd your_flutter_install_dir/examples/flutter_gallery
flutter packages get
flutter run
If you have a real device connected (and the emulator closed) you can also use flutter run release