Curved Shape Background Header in Flutter

Question

I have a list view with "Hero" icons on the left. When I click a list item, it loads the next screen with the article text and the Hero image (which animates nicely/automatically to the correct spot on the 2nd screen).

I would have thought that was the "tough" part, but I'm now trying to get a curved shape as the top background of the 2nd screen. I would love to make it a drawn vector shape, as opposed to a bitmap and even have it drip/bounce onto the page, but at the moment...

I'm just trying to figure out how to:

1. draw a vector shape
2. have it as the background of a screen with other widgets on top (see purple curve on 2nd screen below)

Answer 1

I made a full sample for your curved shape in a gist here

I used CustomPainter to draw on a canvas then, with some geometric calculations, I achieved the curved shape.

Final result

How I draw it?

Before coding and on a Whiteboard I determined somethings:

1. My Canvas Area:
   • The canvas dimensions I need to draw that shape (which equals to Flutter widget's dimensions).
2. How and where my brush will move?
   • how means: what are the APIs I need to draw that shape on the canvas using the Path class. e.g. lineTo() for a straight line, quadraticBezierTo() for a curve.
   • where means: Where are the points (coordinates) I need to draw the whole shape. (see yellow and green dots in the image above)
3. Points (coordinates) Calculations:
   • I used some geometric equations to calculate the coordinates. e.g. Point on a circle’s circumference
   • All of my calculations depend on the canvas size, that gives me a responsive shape.

Full sample here!