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).
Related
the use case is as follows, I am trying to setup a pipeline for an app we are working on . I have noticed that when running the pipeline most of the time is consumed by downloading the relevant android SDKs for the app. since the allowed cache size is limited I was wondering if is a way to perform everything that is done at the start of flutter build appbundle so I can prepare a specific docker image to be used by the pipeline as the build goes much faster without the downloading of all of these sdks.
using flutter build appbundle is what I am doing right now but it makes the image building process slow.
something like :
flutter prepare
note that simply running pub get is not enough
asking here before I create a feature request on https://github.com/flutter/flutter
looked at flutter cli documentation but couldn't find anything.
I make flutter web app and test in debug mode. That is working. Later, Run flutter build web --release this command and then copy files from build/web to the web folder and host on github pages. All is work.
later, I fix some functions and do that above steps again, but nothing changes in github pages. Always show old web, functions. But there is changes in web debug mode. I build with flutter 2.0. How to fix that problem or how should I do?
Do flutter clean. Build for web again and upload the latest build files. Probably your ide created a build from cache
I can solve now...
1.
Clean the build file or type the command flutter clean
2.
Build web release with flutter build web --web-renderer canvaskit --release
3.
Copy all of files and folder inside from web folder inside build folder build/web , to the repo and push again.
(I did a presentation last night and had this question asked. Couldn't find it on SO so I thought I'd ask and answer it myself to help others out).
When running my flutter project, it is demanding an emulator be available but I want it to run in a browser. I noticed that there's an android folder and an ios folder but no web folder. How do I get it to run on the web?
You were on the wrong channel when you created the project. Flutter has multiple channels. To fix it, you'll go to the 'master' channel and add the web components.
Run these commands in your project folder:
$ flutter channel master
$ flutter config --enable-web
$ flutter create .
Don't worry; it doesn't clobber or remove anything when you flutter create .. It just adds the web capability. Now when you run, it'll recognize a browser as a valid environment.
I'm working on a Flutter web app and would like to add some web-specific PWA resources such as icons, manifest file, service worker,...
I've tried to put these files in the /web folder but they're not copied into build/web/ when performing a release build with flutter build web.
What is the right approach to deploy these resources?
This seems to be fixed in the latest versions of Flutter (1.20.0). Previously I had setup a script that did this copy manually, but it's not required anylonger.
I know it maybe still early but I want to try and use full flutter existing cross-platform support in one project. Stability is not my main concern.
I have started a flutter project in android studio. Naturally I have (android/Ios) going smoothly. But I would love to add Web and desktop to the same project.
Please help me with and direction, or if there is solution any one has created however much experimental.
There is a migration guide for web here. I got it up and running on a very basic existing app.
Best way is to do it in a separate branch since it requires changing packages and I even deleted .packages and pubspec.lock files first. Then I ran pub get (not flutter packages get) to download the required packages and run some precompilers.