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.
Related
In Android, every Fragment can partecipate in populating the options menu (aka "appBar actions", in flutter terms) of the activity, using the Fragment.onCreateOptionsMenu callback.
I would like a similar mechanism also in flutter, i.e. that some widgets are able to add buttons ("actions") to the AppBar.
Threads had already been opened on this topic, but none reports a fully functional example and contains solutions to the precise technical problem I encountered.
To do this, I had thought of using the following 'typical' structure:
a StatefulWidget -to which I have given name ScaffoldHandler (ScaffoldHandlerWidget/ScaffoldHandlerState)- which wraps the entire Scaffold, and which uses InheritedWidget so that widgets further down the widgets tree can get a reference to it in an optimal way (using the classic of() method which executes dependOnInheritedWidgetOfExactType()).
ScaffoldHandlerState keeps in a field the actions set by the various children, and supplies them to the app-bar.
a widget that creates the AppBar. In the build() method it gets the actions to be displayed calling ScaffoldHandlerState.of().
mixin ScaffoldChild on State, which applied to a widget gives it the ability to add actions to ScaffoldHandlerState.
Internally, ScaffoldChild executes ScaffoldHandlerState.of() in didChangeDependencies() (to add actions) and in deactivate() (to remove them).
I originally used initState() and dispose() but this did not handle the case where a ScaffoldChild changes position while not being permanently removed from the widgets tree.
The problem I encountered is that ScaffoldAppBar.build is executed before ScaffoldChild.didChangeDependencies, so when the app-bar is created, ScaffoldChild still has to put its actions in ScaffoldHandlerState.
The curious thing is that this problem is due to the simple linear order in which ScaffoldAppBar and ScaffoldChild are inserted in the page: if instead of a top app-bar I want to create a bottom app-bar, the problem is not there because ScaffoldChild.didChangeDependencies would run before ScaffoldAppBar.build.
As a workaround to overcome the problem, I have inserted in ScaffoldChild.didChangeDependencies a call to scaffoldHandler.setState scheduled by WidgetsBinding.instance.addPostFrameCallback(): thus, after the actions have been inserted in ScaffoldHandler, the app-bar is updated with the new actions.
However, this solution seems like a hack to me.
In stackoverflow I see a lot of problems solved with addPostFrameCallback + setState, and sometimes that solution avoids really understanding where it goes wrong; I am interested in understanding if there are better solutions because my purpose, as well as practical, was to better understand the lifecycle of widgets.
Is there a better solution?
This is my code:
DartPad or Gist
(I tried to shorten it as much as possible, but sorry if it's not really short)
Iam using EventChannel to handle events from hardware barcode scanner. EventChannel is initialized in initState, in main class - it works through whole app. While change is detected, it inserts value into global variable (ValueNotifier - i dont know, if it is right) and then I need to work with that value in multiple widgets. I need some sort of widget, which will tell me, that value updated and it will trigger onEvent function - something like RawKeyboardListener. I tried using listeners, but when i do pushNamed, the listener is still listening and it runs code from previous pages, while scanning.
Is there any widget, that would be suitable for me? (cant use ValueListenableBuilder, because it has no "onEvent" function) Or is there any way, to remove and add listeners while moving between pages, or while modal bottom sheet is opened? (I need to access previous listeners, after Navigator.pop)
I solved my problem by using listeners and ModalRoute.of(context).isCurrent.
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?
I understand the "android:initialLayout" element within the xml folder for defining the default layout of an Android homescreen widget. I want to be able to display a "loading your information" on my widget while I am waiting for data...how do I do this. I have tried to display an error message on my widget if there is no connectivity, but it doesn't get past the "android:initialLayout" , so showing code I believe is irrelevant. Correct me if I am wrong please...don't bash me. Any help greatly appreciated!
Yes, the initialLayout is so that your widget displays something before Android has had a chance to call your widget-updating code. This is a great place to put a "Loading..." message.
Once your onUpdate method is called in your widget, that is your chance to get your data. If you have a connectivity problem at that point, you can display an error message at that point. Otherwise, if you successfully get your data, then you can draw you widget with the data.
I'm not sure if I've answered your question, so apologies if I have not. Please clarify a bit more if I have not. The main questions I have are:
Is Android calling your onUpdate function? Log statements can be really helpful for this.
Are you trying to load your data in the background, such as a separate Service, and then reading the results in the widget? Or are you loading the data inside the widget?
I'm trying to use TinyMCE in a widget but it fails. I think the problem is that view is still hidden when "viewAttached" is fired. It seems that TinyMCE has a bug/feature (read last paragraph) and can't be displayed when the target (textarea) is hidden (or inside a hidden div).
I got it working by doing the job in a setTimeout but it's crappy.
Is there a callback that I could attached to which is fired after the view is unhided (after the transition is completed)?
I found one solution:
Explicitly subscribe to the "isNavigating" observable of the router and add TinyMCE when "isNavigating" value becomes false.
Still : this has the effect of flickering - you see the textarea and then it is replaced by TinyMCE... but this is not a Durandal problem IMO.
Edit 1
Finally, I think the the best solution (for now... follow the link below for the thread on the subject) is to do a setTimeout(xyz(), 0) - I have seen a lot of people using this technique and it prevents the flickering.
https://groups.google.com/forum/?fromgroups#!topic/durandaljs/5NpSwMBnrew
Durandal does have a callbacks when you're using composition - you just put a function on to your viewModel with the correct name. In your case, you would use viewAttached:
Here's the docs:
http://durandaljs.com/documentation/Interacting-with-the-DOM/