CODEWITHSUNDEEP
androiddartflutter
ChaosRune
ChaosRune

Reputation: 33

How to create a custom shape, a quadrilateral with rounded corners in Flutter

How do I create a custom shape (a quadrilateral with rounded corners) in Flutter? It should look similar to the image. Is there a way to plot each of vertices and then specify radius for the corners?

Upvotes: 3

Views: 5177

Answers (1)

Richard Heap
Richard Heap

Reputation: 51732

For any custom shape, you can use a CustomPainter. This gives you access to the rich Canvas drawing API, where you can draw shapes, text, lines, gradients, etc etc. You will need to work out the lines and curves to draw around the quadrilateral. (If you have access to a vector drawing package you can probably grab the curve parameters out of that, otherwise just experiment (best to use use absolute co-ordinates, rather than relative if working by hand).)

Here's a template for such a Widget - note, the numbers in this are nonsense - they are there you give you an idea of what to fill in where.

final Path quadPath = new Path()
  ..moveTo(123.0, 12.2)
  ..relativeLineTo(1.1, -0.2)
  ..relativeCubicTo(4.2, -0.6, 12.1, 1.3, 3.2, 3.1)
  // etc all the way around
  ..close();

class LogoWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SizedBox(
      width: 350.0,
      height: 240.0,
      child: new CustomPaint(
        painter: new LogoPainter(),
      ),
    );
  }
}

class LogoPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..color = Colors.blue
      ..strokeWidth = 0.0;

    canvas.drawPath(quadPath, paint);

    paint.color = Colors.blue[600];
    canvas.drawCircle(new Offset(123.4, 56.7), 12.0, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Upvotes: 4

Related Questions