I have a flutter app where can see several cards. These cards are clickable, and will show a InAppWebView with a custom made viewer, which exists on the website I link to.
The loading of this InAppWebView is pretty taxing on the app however, and I would like to pre-load this as much as possible.
It is kinda hard to give a lot of details, since this is job-related and thus private information, so I can't be too specific. I am also the only one working with Flutter here, so no advice can be expected from colleagues.
I am hoping to reduce the loading times of the InAppWebView by having it opened in the background already, and then just swapping to the correct route instead of initializing it from scratch. The problem here is that the URL will change, but that can be handled inside the view instead of creating an entirely new InAppWebView.
In short:
How do I create a widget/route in the background of my Flutter application, and swap to it when necessary?
Maybe you can use a Stack and a Visibility widgets ? like this:
bool _isWebPageVisible = false;
Stack(
children: <Widget>[
MainWidget(),
Visibility(
visible: _isWebPageVisible,
child: WebPageWidget()
]
)
And you could change _isWebPageVisible whenever needed. When visible, the WebPageWidget will appear above the MainWidget.
Related
I'm trying to make a Gym app. You can add a workout by pressing the + on the appbar, and this takes you to a new screen where you can add the information about all the exercises and the workout name. When you press the check button, it goes back to the main screen where it displays all the workout that you've created, so that if you tap on a list tile it displays all the exercises.
My problem is that I don't know how to pass all the information about the exercises back to the main page. The only thing that I pass back is the workout name. My idea was to pass a Map<String workoutName, List> so that in the main page I have everything that I need. What do you think about it?
P.S. Rn I'm not storing anything in LocalStorage yet, mainly because I don't know what to store I was thinking about storing the Map<String workoutName, List> But I'm a fresh dev on Flutter so there may be easier solutions.
There are many ways to do this. Because of the inevitable growth of your requirements, I suggest going with the most common way to both pass variables and control your state. Meaning: when your variables change, when you return to your original screen, the screen also rebuilds to show your new information. Riverpod has become the successor to the previously Flutter team recommended State Management solution.
I suggest finding a nice, popular tutorial on Riverpod, perhaps building an app entirely with the video to give yourself a good start.
I have a sample code which detects a hovering stylus over a widget.
The code is from this Stackoverflow Quesion.
In short. It binds using GestureBinding.instance?.pointerRouter.addGlobalRoute and checks in the handler if the event is of type stylus.
This gets triggered when the stylus is hovering over the screen (no contact).
It works great on Widgets like Text(), Container() etc.
Question:
I want to use this functionality on a different Widget, the Flutter InAppWebView but the event will not get triggered until the pen has contact with the surface. Even on the Container it does not work, if the child is the InAppWebView.
I think this problem will occur on other Widgets too.
I tried the Listener, AbsorbPointer and IgnorePointer.
Update 1:
I can see the following in the debug output when I start hovering the stylus over the screen.
I/ViewRootImpl(23491): updatePointerIcon pointerType = 20001, calling pid = 23491
D/InputManager(23491): setPointerIconType iconId = 20001, callingPid = 23491
Update 2:
The InAppWebView has an option useHybridComposition which is false by default. Setting it to true solves the issue. But the WebView is becoming very slow.
HERE is a repository that shows the problem.
Thanks!
EDIT
As desribed below, this question has two solutions.
Set useHybridComposition to true. For slowness, maybe raise an issue to that repo.
Hook at android/ios level instead of Flutter level, and forward events back to Flutter.
The debugging method maybe like this: Firstly, print out the pointer events in methods like your _handleEvent. Then you will know whether the pointer event just occur, or they even do not occur.
Secondly, try what widgets are OK and what are not. Text is OK, WebView is not. Then is Container OK? Is InkWell OK? Is IconButton OK? Is IconButton OK? etc. By doing this you gain insight of what is special about Text that makes it work.
Thirdly, as a hacky workaround, could you please try Text.rich(WidgetSpan(child: your_web_view))? Since you say Text is OK while other widgets are not OK.
Lastly, maybe need to dig into Text's source to see what magic happens - probably some special configuration? - to let it work.
I am having trouble coding a function. In my app, a quiz has been added, the quiz functionality works, the quiz data is retrieved from a server and delivered as JSON data. I have a problem where my app does not show whether a user's answer is correct or not when they select an answer but will only do so if the user leaves the screen and then returns. Using a function that returns a color, the correct and incorrect answers are presented. However, I am unsure what the problem is; how can I solve it?
I would like to provide the code but it is a lot, so you can find it here: https://github.com/BotsheloRamela/code
Most of the functionality can be found here in the main code: https://github.com/BotsheloRamela/code/blob/main/option.dart
If you're having trouble with that then make sure to do it so
Material(
child: InkWell(
child : Ink()));
// and populate this accordingly
I am developing navigation to the previous pages for my flutter browser app, and to do this I am using goBack and goForward methods of InAppWebViewController.
To check whether I can go back (to change color of navigation buttons) I also call canGoBack method. As it returns Future, I am using FutureBuilder to display these icons.
I propagate canGoBack() or canGoForward() to the future field of FutureBuilder. And then a lot of strange thigs happen: sometimes when I switch between different tabs (which work similar to tabs in https://github.com/pichillilorenzo/flutter_browser_app) I receive:
MissingluginException: No implementation for method canGoForward on channel com.pichillilorenzo/flutter_inappwebview_n, where n is some number
Bug usually occur when I pop back to the widget with buttons and InAppWebView from tabs page.
I've searched all related github issues and haven't found anything related, tested on android(emulator + real device), iOS (simulator + real device) - and I cannot even see the pattern of how to reproduce this bug.
So, I have several questions:
What may be the reasons for this to happen? At first glance, it happens at random moments
What 'channel' exactly means here? I would be glad to read more about that
May it be caused because I use FutureBuilder?
Web view takes more than 4 sec to load the webpage. The same page takes less than 2 sec in Native app. Is there a way to speedup the load time. I tried both Official webview_flutter and flutter_webview_plugin.
If you app relies on WebView, just choose other tools: Swift for iOS & Kotlin for Android.
Here is why:
WebView actually does not load pages slow. Instead, creating the WebView widget is slow;
In order to solve 1, you might want use a cached WebView. Unfortunately, that is not easy. Layout changes (e.g. animation) might trigger a WebView "recreating" (the cached WebView becomes invalid/staled). And the "recreating" is very slow;
Flutter's widgets depend on "state" outside of the widgets, and widgets' creating are supposed to be fast/simple. Unfortunately, WebView (which is not a native widget) is not the case. WebView has its complex internal "state", a recreation simple discard everything and you returns to the WebView's initial state (initial URL). And it is very slow (Creating time + LoadTime: Network overhead);
It is very hard to create a "external state" outside a WebView, therefore after a WebView's recreating it cannot resume from the external state;
Since WebView's recreating is very slow, it totally kills animation and gives user a very bad experience. A solution might be put a WebView as your main page and never try to animate to a new WebView (just like a Wiki App Demo in YouTube).
Conclusion:
So, now, WebView in flutter is not ready and please don't consider use it seriously.
Discussion:
Flutter's widgets design is quite "unusual" since they are basically immutable. States outside widgets (external state) are used. When state changes, instead of modify the widget, Flutter choose to create a new widget based on the new state. Therefore, widgets are deigned to be light weighted so they can be created/destroyed very quickly. Unfortunately, WebView cannot fall into this category. WebView is as complex as the whole Flutter framework, so it cannot be a native widget but a plug-in. And WebView has its own internal state which is not compatible with the framework, which results in keep on being destroyed/recreated by the framework.
I am not sure why Flutter's widgets are designed in this way, maybe it is easier/faster for creating the framework? I saw some complex examples (~100 lines) using Redux/BLOC/Steam just in order to "change" a widget, which might just need a one-line of code in other frameworks.
Performance is also an issue. Rebuild a complex widgets tree is slow. Then you need writing a lot of code (Redux/BLOC/Stream/ScoppedModel...) in order to implement a partial widgets tree build.
Even for a very simple app, performance of Flutter is still not as good as native (https://thoughtbot.com/blog/examining-performance-differences-between-native-flutter-and-react-native-mobile-development). In fact, I'd like considering Flutter as "native" since it is compiled into machine code instead of Java's ByteCode.
Finally:
I am a new Flutter learner and start playing with Flutter for a couple of weeks. The widgets framework and the WebView plug-in just made me headache. A lot of time spent on the UI interface instead of the core logic of my app.
I am not saying Flutter is not good. Actually, I think it is the best cross-platform framework for iOS/Android. It just might be something (e.g. complex external widget like WebView) was not being taken into consideration while the framework was being designed. Hope the Flutter team can find a solution for this, maybe a special case for handling a complex external plug-in?
I will keep on learning/playing with Flutter.
And now Hybrid-Composition is default in webview_flutter 3.0.0:
https://pub.dev/packages/webview_flutter/changelog
Just tried it on my side and since it's not perfect, it's much more faster
cheers!
Updated to webview_flutter 1.0.x and adopted Hybrid-Composition. It performances much better on Android now.
Announcement: announcing-flutter-1-22-44f146009e5f
How to: webview_flutter
Docs: Hybrid-Composition