So in my app, I create an additional page. When that page is opened, it will guide a user through a series of steps, that ultimately open a webview pointing to a URL in backend, that generates an image to be saved to the server. The user doesn't need to know what's being drawn in the webview, so the webview can be set invisible (opacity = 0.0).
The image can only be generated by that web page (which is why I have to open it with webview). This is a client-side javascript and HTML5 canvas process that can't be done by server-side code alone. There's actually a web page that has to be opened. And all the Flutter code need to do is to open the webview component long enough for the image to be created and automatically saved into the server.
The problem is, the process may take dozens of seconds. In my case, it takes like 7-12 seconds. And the user may press back on the page that unfortunately will close the webview too and cancel the image generation and submission. I already added an infinite circular progress indicator, but apparently, from the early user tests, some users weren't patient enough to wait that long and already pressed back before the image is finished rendering.
My question is, how can I create a webview detached from the current screen, so that even after the current screen is closed, the webview will still be running in the background?
Currently, I use flutter_webview_plugin: ^0.3.11 for this. It allows for launching webview popup that's hidden. But when I close the page, the invisible webview popup also gets closed too.
Combine Offstage widget with custom pop logic (instead of popping back, just hide the webview by setting bool offstage to true).
As per Offstage docs:
A widget that lays the child out as if it was in the tree, but without
painting anything, without making the child available for hit testing,
and without taking any room in the parent.
Offstage children are still active: they can receive focus and have
keyboard input directed to them.
Animations continue to run in offstage children, and therefore use
battery and CPU time, regardless of whether the animations end up
being visible.
https://api.flutter.dev/flutter/widgets/Offstage-class.html
Related
I can't really share code for this as it's for my entire ~large~ application, but is it normal for a flutter application's lower navigation stack to be updated when the current page is?
For example, in this page I have a standard form with a few TextFormFields:
Whenever I click on one to start typing the page sets state as expected, but by adding print("Update"); inside the build function of the bottom page of the navigation stack, I can see that page is being updated too. It happens on all pages I put on top of the first route page. I've also been experiencing that the home page gets slower as the app has been open for longer, could this be a cause for that problem too?
I have built a functioning flutter app using Navigator 2.0 API and RouterDelegate. All the navigation works fine but the problem is on the back event. On pressing back either from the app bar or from the device button, the top page does pop but the page that is 2 layers deep in the stack is displayed for a fraction of second before the desired page is displayed.
Like in the attached image, when going back from ArchivedChatThread, Bots is displayed for few milliseconds and then another page is shown. Here, the stack is also not proper as there should be one page between Bots and ArchivedChatThread i.e ArchivedChats.
I tried a lot of different things but am unable to find a solution as this is my first flutter app and Navigator 2.0 being a relatively new and complex concept.
image
Any kind of help is appreciated. Thanks!
If I call my app using a separate activity (not the normal initial route but, for instance, by overriding getInitialRoute() in a secondary FlutterActivity), or maybe even if I have no UI at all but a plugin I call into provides a platform UI of any kind, upon returning to my code, when I want to dismiss the functionality, the root route of my Flutter app is visible for a short moment. As an example, let's consider a printing scenario:
my app receives a share intent
I catch the intent with my Android code, send it to the Dart side
I act upon the intent, which involves displaying the Android printing UI
the user finishes printing or dismisses the UI
control returns to my code
before my Flutter app goes away, its initial route displays temporarily
Item 6 happens even if I call SystemNavigator.pop() in my item 5. The app exits all right, the funcionality is OK, but the momentarily visible root page is a visual nuisance.
So, what I would practically need is a way to clear the back stack when I reach item 5 to make sure I don't return to the root, not even for a moment.
I found something in the meantime that, at least for now, seems to work. It involves several steps:
make sure you use an extra route for this activity -- this ensures that it won't be the root page but this one the navigation returns to temporarily,
make sure the route shows an invisible page, practically an empty Container() -- this ensures the page will not show anything,
start this activity with a transparent background mode (including a transparent launch theme and referencing it in the manifest) -- this ensures the page will not even re-color the background temporarily,
use SystemNavigator.pop([animated: false]) when your code returns from the foreign UI -- this ensures that the extra page will disappear in the end. Animated actually does nothing, as the doc describes (which is unfortunate, actually, it would be nice to be able to suppress it).
These all combined make sure that, although the extra page is technically present for a short period of time, it isn't actually visible and distracting to the user.
I'm still very much open to suggestions that provide a real solution rather than a hacky workaround, if possible. :-)
In the home page of my iphone application i am calling a web page, users can do some actions(comment,like etc) from other tabs of my app-After that,when the come back to home page the web page must be refreshed(eg:- comment/like count must be incresed)
If user do the refreshing of home page(scroll up from top) the page is getting refreshed,but the client wanted to refresh it automatically
So i have loaded the web page in viewDidAppear method,
Now problem is-whenever user come back to home page it gets refreshed and showing from the top(if user go to detail from some link at bottom and come back,webpage shows the top)
how to prevent this,or is there any better idea for automatic refreshing ?
Perhaps a better way would be to use javascript to download the updates in the background, then update your content appropriately. UIWebView has a method –stringByEvaluatingJavaScriptFromString: which can be used to run javascript code. You could supply the method call to perform the refresh in your -viewDidLoad method.
Another option could be to download the HTML in the background, and compare it too what is displayed, if different, swap. That way content is only refreshed when needed. Although that still gives you the problem of content moving to the top.
How can I automatically refresh the page (with JS/jQuery) whenever the user resizes the window ?
(it must sound like a weird thing to do but I have a good reason to want this : in summary, Dailymotion videos cannot be resized by JS dynamically as YouTube videos can, but their size can be set by JS based on the window size)
window.onresize = function(){window.location.reload();}
In some browsers the resize event is triggered continually while resizing, so you need a debounced event. When that event goes off, there are many ways to refresh the page.