Flutter Detect whether there is content behind AppBar whilst scrolling - flutter

Is there an easy way to detect when there is content behind a fixed container that is floating on top of a ScrollView.
In native iOS apps, the background of the TabBar and NavigationBar are only visible when there is actually content behind them. So the NavigationBar will fade in it's background as the user scrolls down.
Whilst this can be calculated to provide the scroll position of when to add opacity to the NavigationBar Background, it is much more complicated with any form of bottom bar as it would have to know the total length of the scroll window as well as calculate the bounce scroll offset at the top.
As much as all this can be calculated in theory, is there an easy way. A way of detecting when there is content behind another element.

You will need to pass a ScrollController to your scroll view and then listen to the scroll value and change the state of the appbar.
Example:
scrollController.addListener(() {
//Check offset value
if(scrollController.offset > 10) {
//Change transparency here
setState(() {
...
});
}
});
Adapting this to your use case it should work

Related

How to perform an interactive animation with Auto Layout in which you interpolate between different constraints?

I'd like to have an interactive animation where a view transitions from one set of constraints to another as the user drags up/down the screen. The background image should shrink vertically (easy), and the profile image should change from being horizontally and vertically aligned to the background image to being anchored to the top and left corners of the background image. Is this possible?
Yes, it is possible, and you can see this effect in the Avvo app, for example (in the lawyer profile screen). The trick here is to smoothly transition from one set of constraints to another.
Here's an outline of how to do this:
add a UIScrollView. Add the view you want to animate as a subview to the scroll view.
Make your view controller implement
UIScrollViewDelegate
In the delegate method
scrollViewDidScroll(_:), update the constraints' constants as
needed.
Also in that method, when contentOffset crosses a
threshold value, flip to a different set of constraints, by setting
their active property to true or false.
To keep the view (the headshot image, in my example), pinned to the top as you scroll, just continuously update its top spacing constraints based on the contentOffset.y value.
Achieving a perfectly smooth transition may take some trial and error, but it definitely can be done!
Here are the screenshots showing the transition as you scroll up:

How to change UITableView's scroll indicator's color?

How to change UITableView's scroll indicator's color? I just need to set it's color. Don't propose change it's style to black or white.
There is not a public API for doing that. Any recommendation that would be given would be likely to be broken when Apple makes changes to the underlying structure of the scroll view.
That does not, however, preclude you from creating your own scroll indicator from scratch. I needed to do this in a particular use case where a scroll indicator needed to be visible at all times, not just when the user was touching the scroll view.
You can have your custom scroll indicator view and position it where it needs to be based upon the content offset of the scroll view and its scroll indicator insets. Adding a handler in scrollViewDidScroll: would then allow you to correctly position it and take advantage of any inertia that the scroll view has.
You can even contract the size of the scroll indicator view based on how far the user has scrolled beyond the content size of the scroll view, to give the same effect of bouncing that Apple's implementation has.

Smooth circular UIScrollview using auto scroll programmatically

Is there any way to make UIScrollview circular based on auto timer. I have some banner on home page which need to display automatic scroll.
I have added NSThread timer but when uiscroll view comes from last to first rect, it display inconsistency, which look like jump. I want to make it smooth scroll.

UIScrollView change pages after animation

Ok, I have a complicated scenario here. I have a scrollview which scrolls horizontally and contains tiles, 1 centered on the screen at a time with the user still able to see if there are more to the left or right by way of having the edges of the 2 views visible on either side. I am able to add the views programmatically to the scrollview and have paging work properly, so the user can swipe back and forth between them. Another requirement is to have an initial animation where the first view slides in, then is bounced off to the left by the second view. I accomplished this by using a series of UIView animations, and it works well.
Here is my problem: After the animation completes, you cannot scroll left to get to the first UIView that was created. I suspect that this is because it was animated out to the left of the content area of the scrollview. I have tried to increase the contentSize of the scrollview, but I still get the same behavior.Once the initial scrollview has been moved off to the left, I cannot swipe to page to it.
Is there a common pattern I could use to accomplish this in a better way?
It sounds to me like you're animating the child view's frame to the left so that the x coordinate of that first view's frame is negative, instead of animating the scroll view's contentOffset to the right. If that's the case, is there a reason you aren't just setting the scroll view's contentOffset inside an animation block? If there is a reason, what if after the animation completes you "fix up" the content offset and the frames of the child views so that none of the views are in a negative position.
But, I guess I have more questions than answers right now, so it might help to post the code showing how you do your animations to make it easier to answer your question.

How do i anchor subviews of a UIScrollView like the URL bar in mobile safari?

I want to do something similar to how mobile safari keeps its URL bar anchored at the top of the screen while a page is loading unless you scroll past the top, in which case it scrolls down with the rest of the content.
I, however, want the opposite to happen; I want specific subviews to scroll off the screen if I scroll down, but if I scroll to the top I want the subviews to stay anchored at the top of the screen while the rest of the content continues to scroll down. I suppose I could do some trickery with the view hierarchy where the subviews change their superview when we scroll to the top, but I'm wondering if there are any other more elegant solutions to this.
Very late answer to my own question, but I figured i'd reveal how I was able to do this.
I subclassed UIScrollView and implemented the layoutSubviews method, which is called every time the scroll position changes. Here, all you need to do is identify which view you want to anchor and do something like this:
- (void) layoutSubviews {
[super layoutSubviews];
CGFloat x = 0.0f;
CGFloat y = MIN(self.contentOffset.y,0.0f);
anchorview.frame = CGRectMake(x,y,anchorview.frame.size.width,anchorview.frame.size.height);
}
If you want the anchored view to stay at the top if you scroll past the top (instead of remaining in the same position relative to the scrollview), then this will do just that, since the content offset's y coordinate will be less than zero when you scroll beyond the very top of the view.
UITableView section headers already do this in plain tables, you could leverage that behavior.