Flutter: Live Mirror Content of Widget to another Widget - flutter

I'm trying to live copy the content 1:1 to another widget. Is there some Widget that already has this functionality?
For some Context: I have the Surface Duo and the hinge blocks some of the content in the middle (under the hinge) when spanning the app across both screens. There seems no way to avoid that, so I'm trying to build an app that prevents this as follows:
Build a custom browser
Render at full screen resolution
Copy content to second widget
Overlay/stack second widget on top of first widget, clip/crop and move it so that the content continues without loss of information.
I'm happy to elaborate on the problem if you have any questions. Of course any other solution that you might come up with is appreciated (for example, if there is some way to skip rendering a Widget for part of the screen).
Thanks in advance and best,
Daniel

Related

Flutter - web app - what's the best practice for displaying a modal data entry form?

I'm building a web app with Flutter, and I was wondering what the best options are for displaying a modal data entry form that does not need to take the whole screen space.
Initially, I was looking at pushing another Scaffold based screen, but that takes up the whole screen space.
Any suggestions?
My humble solution is to wrap your Scaffold's body's Widgets in a Stack.
You can choose whether or not to display the form using if (someState) ... inside the children list.
The form itself can be wrapped in a Card that is wrapped in a Center Widget.
There might be better solutions but that's what I use.

How interactive can a component be inside of a widget?

my job is to create a few widgets using widgetkit and swiftui, however the main project is build on uikit so I am not very good with swiftUI. Nevertheless, I would like to know whether I can add a graph inside of, for example, medium sized widget, and can the graph be scrollable to reveal more information? Or could it only be clickable? Thank you.
I know how widgets work, just interested in whether it is possible to create a scrollable graph inside of a medium sized widget.
I'm only just getting started with widgets myself, so happy to be corrected. But interactivity with widgets is very limited - effectively to taps and nothing else. They're designed more to be informational displays than interactive user interfaces.
If your widget is larger than the small size (the square one that takes up the same space as 2x2 app icons on the iPhone home screen), you can have multiple tap targets. For example, if your widget had a list of calendar items, you could set it up so that a user tapping on a specific item opened the app with a view showing that item in more detail.
So no, a scrollable graph isn't feasible. But what you can do is create a graph that shows a snapshot of data that a user is most likely to find useful when glancing at their home screen – and making sure that if they tap on it, they go straight through to a more interactive version of the same data.

Manage Device Sizes MediaQuery Globally

What is the proper way to handle device size globally. The idea is not to have a [MediaQuery.of(context).size.width] on each screen of the app. There is already a question and answer about it, but the only answer is out of date because there was no null safety yet.
The answer suggests creating a constants.dart file, like in the image below:
1
And initialize in the build of the first widget of the application:
2
The problem is that for it to be constant it must have a value, and not wait for the first build. It is also true that the value canchange based on device orientation and I would like to handle this as well.
I have doubts about it. if someone can help me
You cannot save the screen dimensions as a constant, because they will change if the device is rotated, or when the screen is resized, such as for desktop and web apps.
Instead you should be pushing your cutpoint decisions as low as possible, using LayoutBuilder.
LayoutBuilder seems preferable over every use of MediaQuery for sizing a viewport (either the whole screen, or the space left in a column or other layout).
LayoutBuilder also works hard to avoid rebuilding its child if the size doesn't change and the parents haven't had to re-layout.
The builder function is called in the following situations:
The first time the widget is laid out.
When the parent widget passes different layout constraints.
When the parent widget updates this widget.
When the dependencies that the builder function subscribes to change.
The builder function is not called during layout if the parent passes the same constraints repeatedly.
And you don't have to think about "the height of the appbar" ever again, because you're getting the space left, not the total space on the screen.
Check it out: https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html

What widget for Swiping entire page with data from sqflite?

Does anyone know what kind of Flutter widget can do left/right page swipe to move to another page like in the reference that takes in the data from sqflite database to generate the contents?
I found this package https://pub.dev/packages/swipeable_page_route which does the swiping nicely, but the page is required to be hardcoded, so in my case, it's not quite efficient to do it.
Thanks in advance!

How to check visibility of a Flutter widget even when covered by another

I'm trying to find a way to check the visibility of a Flutter widget when it's either off screen or when it's obscured by another, for example Drawer, Dialog or BottomSheet.
visibility_detector helps with checking whether it's on the screen or not but does not work with the second use case (known limitation).
Is there a lower lever api that I can use to check whether a widget is actually visible to the user?
My use case: I'm adding a widget to the Overlay when something external happens (similar to Tooltip but not on long press). If the user opens for example the Drawer, the widget will appear on top. I want to detect that the child is not visible and delay or cancel the action.
Do I understand your problem?
You have a widget you want to always be on top?
You want the user to interact with that widget first before doing other things?
Use design patterns to make coding easier, your users will thank you.
You can show a Dialog on-top of other widgets with the showGeneralDialog or showDialog functions. Because Dialogs are a design-pattern used in many apps, users will already know how to use them.
Define app behavior with explicit state.
It is too hard to derive app behavior from rendered UI, not all devices are the same size and shape. This means you should try to write a variable that describes your situation and then write the code you need to make that variable's value correct. It sounds like you want a variable like bool overlayIsShowing.