9

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)

goal

Dave
  • 28,833
  • 23
  • 113
  • 183
  • [This](https://iirokrankka.com/2017/09/04/clipping-widgets-with-bezier-curves-in-flutter/) might help you. – Jerome Escalante Jan 02 '19 at 01:34
  • @JeromeEscalante I don't think it should require masking off an image or a block of color. (should it?) I think there's a way to create a shape with flutter. – Dave Jan 02 '19 at 01:38
  • Flutter has full blown Canvas, and Path classes if you want a lower level control instead of ClipPath solution – Ajay Beniwal Jan 02 '19 at 06:29
  • 1
    `"I think there's a way to create a shape with flutter."` - see `ShapeBorder` class (or use `CustomPaint` to have the full control on what you want to draw) – pskink Jan 02 '19 at 09:03
  • @pskink I saw this class, but couldn't find any reasonable examples to follow or learn. :/ – Dave Jan 02 '19 at 15:52
  • `ShapeBorder`? or `CustomPaint`? – pskink Jan 02 '19 at 15:53
  • for using `ShapeBorder` see https://docs.flutter.io/flutter/material/Material/shape.html – pskink Jan 02 '19 at 15:56
  • @pskink - am I missing something? That page has almost no helpful information. – Dave Jan 02 '19 at 20:55
  • yes, it has: any material widget can have a shape defined by a custom [ShapeBorder](https://docs.flutter.io/flutter/painting/ShapeBorder-class.html) class - like: BeveledRectangleBorder BoxBorder CircleBorder InputBorder RoundedRectangleBorder StadiumBorder – pskink Jan 02 '19 at 20:58

1 Answers1

25

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

Flutter curved shape with a circle inside

How I draw it?

enter image description here

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!

Tarek360
  • 1,251
  • 1
  • 13
  • 19