I'm using curved_navigation_bar : this one
I have an animatedContainer that shrink to 1/4 of its size, and it has an Curved Navigation Bar,
when the Container shrinks the navigation bar draws a little bit outside of the container, I need a way to stop it.
attached: screenshot of the problem, you can see in a blue circle the extra drawing it does and that I need to stop.
I've searched the web for solution and even tried to examine the source code but with no luck
The solution given by #pskink
using clipRRect ( or clipReck ) and inside of it put the entire child of the AnimatedContainer, will resolve this problem perfectly!
Related
I am trying to reproduce this navigation bar (made on figma) with flutter :
I have already done the background shape with the CustomPaint class, however I cannot reproduce the shadow.
As you can slightly see, the border isn't equal along all borders, there is more shadow inside the half-circle in the middle than on the top border parts.
Also, I cannot control the blur and spread values (as with figma). Is there a way to achieve what I am trying to do. Or did I missed something ?
I am trying to build a screen that looks similar to the following:
The main functionality I am looking for is that:
It is scrollable
There is an image in the top half of the screen
Below the image is a container with other information in it. The top of the container should overlap the bottom of the image and have rounded borders.
Would any one be able to help me with this. I've been trying stacks, with positioned container and images within singlechildscroll views but not getting anywhere at all right now.
Any help would be really appreciated.
Many thanks
I was wondering how you would go about implementing a persistent bottom sheet that has an initial height and then expands into two positions.
Initial position - https://i.stack.imgur.com/1QlPu.png
Expanded position - https://i.stack.imgur.com/LeXTJ.png
Fullscreen position - https://i.stack.imgur.com/L6WBq.png
I'm also trying to implement something similar to this, and so far my research led me to using customscrollview and slivers. But the UI is not quite the same, the main ui behind (based on your image = map) would actually animate a bit upward after trying to expand the view on top.
I will be trying out other things, like using stack with the front view having the same implementation as the customscrollview I mentioned, and making it transparent so the back view would still be displayed.
I hope this helped.
I want a CustomScollView with flexible Header where the items while scrolling vanish/appear smoothlyt by overlaying the top and bottom limit of the SliverList with a gradient that ranges from transparent to the color of the rest of the page.
Like in the this schematic layout.
At the bottom this was possible without any problems by placing the Container with the gradient inside a Stack with overlap=true and positioning it outside the Stack.
I tried the same inside the SliverAppBar's flexiSpace but it did not allow that the gradient container overlapped its limits instead it was clipped.
Is there an easy way to accomplish it? I found a solution by using a Stack around everything and position the gradient container there by listening to the moving of the flexispace but that seems a bit cumbersome.
I'm playing around with an iOS project in Xcode, I've created a new navigation based application, and I'm curious of something. Is it possible to add a margin around the screen, so that the navigation bar, table and toolbar have a few pixels on the top, bottom, left and right? The purpose would be for the entire view of the application to not be 100% of the width and height of the screen, maybe only 95% of each. Not sure if I'm using the right terminology, I'll try to clarify if necessary. Thanks!
Maybe I just didn't ask the question sensibly, but since I can't find an answer, I'm just going to create custom images for navigation bar and toolbar using black space for the margin, and use another question's answer in regards to shortening the width of the UITableViewCells.