In the image below you can see I added another component and the box resized itself correctly. Below that I added the Box that hosts the content shown below the curved background (Grid menu).After that I added the Column that draws the curved background, it’s children are drawn inside the box (Welcome back and Income/Expenses).Then I calculated contentTopPadding, this is what makes the box adaptable to different content sizes.I defined some variables to set how big the spacing between components should be, you can tweak them if needed. I arrived at these numbers by trial and error, you can change them if you want your shape to look different.Īfter I had the custom shape, I created the header component. What makes this a little bit more complicated is the fact the the background height is not static, I made it so it adapts to the content that’s being displayed above it.įirst I started by creating a custom shape that has the curvature I want, to do that I extended GenericShape and used cubicTo do draw it. This component is pretty simple, we basically have the curved background and the rest of the content above it. I was looking for inspiration and came across some other apps that used this curved background, so I decided to use it for the home header.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |