I am currently creating a flutter web application for a client, however, when the website is navigated to for the first time in the browser, the page loads to a blank screen and a few seconds later shows the actual homepage widgets. After the page has been cached in it seems to be quicker on subsequent reloads.
Is there something that I can change about my flutter web app in order to decrease this initial load time? I know that flutter web is still in beta, so it may just be that -- will this be fixed when flutter web becomes deployment ready?
Any help is appreciated.
Before running certain views, especially the first time the web app is built, it takes a moment to load everything up. The best thing to do in such case is to add a loading screen/widget.
You should have a look at this article by Juan Curti.
I think a found a solution for that, let me know if it works!
I posted it here... Basically you need to add two lines to the <head>...</head> tag on your index file to start loading the CanvasKit binary from the beginning.
<script src="https://unpkg.com/canvaskit-wasm#0.33.0/bin/canvaskit.js"></script>
<link rel="preload" href="https://unpkg.com/canvaskit-wasm#0.33.0/bin/canvaskit.wasm" as="fetch" crossOrigin="anonymous">
Be careful with which URL you use above, there is a better explanation on the link above! Hope it helps at least a bit with your initial loading time!
Consider using ditman's solution in
https://github.com/flutter/flutter/issues/76009#issuecomment-1095663169
He puts an example of his solution at
https://dit-tests.web.app
Related
I have one project that I have to sell to another clients, so I wanna found a way to unify the code to, when I release some updates, I have to manipulate only one code (and, of course, keeping the specificities from each one)
I found an article HERE which the guy creates a new folder named 'config' and set some variables there to be used in the parent project. I tried this but find out that would be very tough to do because the first app was developed specifically by one client, and with it I would need so much time to make all the aspects dynamic... Another problem is firebase, in first app I used firebase but in the second i won't. How to make it possible?
And in this article they say about 'flavours' that can be used to do something similar.
Someone knows about this approaches or there is another to reach my goal? With flavours I will have less re-factor than with config?
I appreciate any help
A third way to do this with no client specific app configuration is to make an api call to get back your client specific theme, and then set the flutter theme based on this.
If you need web support see below:
First update your assets in index.html that aren't white labeled, leaving stubs in their place that we'll fill in later. i.e.
Next show a nice loading indicator while flutter loads. To do this, just put the html for it in the body element of the index.html file.
Finally update the webpage title and favicon using javascript inside Flutter. I used package
universal_html: 2.0.8
https://pub.dev/packages/universal_html
then you can update the favicon
import 'package:universal_html/html.dart';
var favicon = document.getElementById('favicon');
favicon?.setAttribute('href','insertLinkToYourImage');
Updating the title can be accomplished in various normal ways like just setting the title attribute of a MaterialApp widget.
I want to navigate to another page in my application. I don't want the page to reload(i.e.. application should be a single URL application).
I know only one way to accomplish this by changing the proper div attached in the RootPanel by whatever data I want to display. But I fell that might get cumbersome if there are many navigations(I haven't tried it though :P).
Is there any other way to accomplish this or make the above said approach better?
Thanks in advance.
I guess you need GWT Development with Activities and Places
Well ,its time to have a look on MVP
With that you can do
History.newItem(tokenOfYourPresenterScreen);
A nice single EntryPoint demo app is here : (BrowserHistoryExample.java)
http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsHistory.html
I added the below to the example to demonstrate links.
vertPanel.add(new Label("Access history via Hyperlinks"));
vertPanel.add(new Hyperlink("External Page 0","page0"));
vertPanel.add(new Hyperlink("External Page 1","page1"));
vertPanel.add(new Hyperlink("External Page 2","page2"));
I'm using the Facebook Comments plugin for a local travel website in an area with poor internet. When the net is slow often the comments plugin takes forever or does not load at all. When it doesn't load it is just blank space instead which makes the page look odd. I want users to know that there should be content there.
Any ideas for how I could display a LOADING graphic while waiting for the Facebook Comments plugin to load? And then maybe if it hasn't after 10 or 15 seconds it returns an error message in that space instead.
I think a possibility might lie in the #Comments value that Facebook returns. Maybe a graphic could be loaded until that value is returned?
Found a solution elsewhere - maybe it will help someone else with a similar problem:
Just replace this snippet with the current one you have where you want the count to appear,
Place the gif image in the same folder as the html file. Or change the path in the src="" to the correct path on your server.
You should see a loading animation while the count of comments from facebook updates.
I was advised to post this here by SoundCloud support - I hope you can help. I want to use the html5 widget on my site and access different sets but, rather than have multiple widgets on a page, I want to be able to reload the widget with a different set by clicking on different links on the page. It seems you can do this using the API and I have been playing with w.soundcloud.com/player/api_playground.html and have got it to load my sets by putting the api.soundclound.com url in the appropriate box and clicking "reload widget".
I really don’t know javascript at all so I was hoping to copy the source from that page and try and edit it to do what I want. However, I can’t even get the page to load when it is hosted on my site:
http://www.indigomusic.co.uk/SCtest/playground.htm
I downloaded api.js and put it in a folder on my server but I’m obviously missing step(s). I’ve read http://developers.soundcloud.com/docs/html5-widget#introduction but it obviously assumes a level of javascript knowledge that I just don’t have...
...are you able to help?
Many thanks,
Dan Selby
You don't have do use the Widget API for that necessarily.
Here is a simple example using jQuery and the SoundCloud SDK doing what you described:
http://dl.dropbox.com/u/12477597/Temporary/dynamic-widget-example.html
Hope it Helps.
I'm trying to include a Facebook share iframe on a site that's served using Flask and Apache. The iframe loads inconsistently however and I am at a loss for possible explanations. Here is what I have observed:
The iframe loads correctly in Firefox and Safari but not Chrome 10.0 dev, on Mac
In Chrome, the iframe never loads correctly when I load the entire page
If I strip half of the elements from the page, the iframe loads correctly maybe three times out of ten - doesn't matter which half I remove.
If I strip all of the elements from the page, the iframe loads correctly every time.
The inconsistent behavior makes me think there's some sort of race going on, but I don't understand what the problem would be, or why it would only appear in Chrome. Anyway, I appreciate your help. You can view the site here. Thanks, Kevin
I think they key is in this statement:
If I strip half of the elements from
the page, the iframe loads correctly
maybe three times out of ten - doesn't
matter which half I remove.
I'd dump the output to a text file and would run tidy(1) or xmllint(1) over the response to see if you have a mis-matched HTML tag. Chances are Chrome is not handling the error correctly, but Firefox and Safari are able to recover.