Draw a curved shape in Flutter

CurvedShape.dart

import "package:flutter/material.dart";
import 'package:flutter/services.dart';
import 'dart:math';

const CURVE_HEIGHT = 160.0;
const AVATAR_RADIUS = CURVE_HEIGHT * 0.28;
const AVATAR_DIAMETER = AVATAR_RADIUS * 2;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return new MaterialApp(
      title: 'CurvedShape',
      theme: new ThemeData(primarySwatch: Colors.blue),
      home: new MyHomePage(title: 'CurvedShape'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: new Stack(
        children: [
          _buildContent(),
          CurvedShape(),
          Container(
              margin: EdgeInsets.only(top: CURVE_HEIGHT - AVATAR_DIAMETER),
              width: double.infinity,
              height: AVATAR_DIAMETER,
              padding: EdgeInsets.all(8),
              child: Container(
                decoration: new BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.deepOrangeAccent[400],
                ),
                child: new Icon(
                  Icons.mood,
                  color: Colors.deepOrangeAccent[100],
                  size: AVATAR_RADIUS,
                ),
              ))
        ],
      ),
    );
  }

  Widget _buildContent() {
    return Container(
      child: SingleChildScrollView(
          padding: EdgeInsets.fromLTRB(16, CURVE_HEIGHT, 16, 16),
          child: Text(
            "There are many variations of passages of Lorem Ipsum available, but the majority have suffered "
                "alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc."
                "There are many variations of passages of Lorem Ipsum available, but the majority have suffered "
                "alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.",
            style: TextStyle(fontSize: 18),
          )),
    );
  }
}

class CurvedShape extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      width: double.infinity,
      height: CURVE_HEIGHT,
      child: CustomPaint(
        painter: _MyPainter(),
      ),
    );
  }
}

class _MyPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    Paint paint = new Paint()
      ..style = PaintingStyle.fill
      ..isAntiAlias = true
      ..color = Colors.purple[700];

    Offset circleCenter = Offset(size.width / 2, size.height - AVATAR_RADIUS);

    Offset topLeft = Offset(0, 0);
    Offset bottomLeft = Offset(0, size.height * 0.25);
    Offset topRight = Offset(size.width, 0);
    Offset bottomRight = Offset(size.width, size.height * 0.5);

    Offset leftCurveControlPoint = Offset(circleCenter.dx * 0.5, size.height - AVATAR_RADIUS * 1.5);
    Offset rightCurveControlPoint = Offset(circleCenter.dx * 1.6, size.height - AVATAR_RADIUS);

    final arcStartAngle = 200 / 180 * pi;
    final avatarLeftPointX = circleCenter.dx + AVATAR_RADIUS * cos(arcStartAngle);
    final avatarLeftPointY = circleCenter.dy + AVATAR_RADIUS * sin(arcStartAngle);
    Offset avatarLeftPoint = Offset(avatarLeftPointX, avatarLeftPointY); // the left point of the arc

    final arcEndAngle = -5 / 180 * pi;
    final avatarRightPointX = circleCenter.dx + AVATAR_RADIUS * cos(arcEndAngle);
    final avatarRightPointY = circleCenter.dy + AVATAR_RADIUS * sin(arcEndAngle);
    Offset avatarRightPoint = Offset(avatarRightPointX, avatarRightPointY); // the right point of the arc

    Path path = Path()
      ..moveTo(topLeft.dx, topLeft.dy) // this move isn't required since the start point is (0,0)
      ..lineTo(bottomLeft.dx, bottomLeft.dy)
      ..quadraticBezierTo(leftCurveControlPoint.dx, leftCurveControlPoint.dy, avatarLeftPoint.dx, avatarLeftPoint.dy)
      ..arcToPoint(avatarRightPoint, radius: Radius.circular(AVATAR_RADIUS))
      ..quadraticBezierTo(rightCurveControlPoint.dx, rightCurveControlPoint.dy, bottomRight.dx, bottomRight.dy)
      ..lineTo(topRight.dx, topRight.dy)
      ..close();

    canvas.drawPath(path, paint);
  }

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

What's this?

This is a sample app with full implementation for a curved shape introduced in a question on StackOverflow

A screenshot from the question:

Copy and Run!

Copy the gist to an empty Flutter project and Run, You should get a result like the following:

How I draw it?

Before coding and on a Whiteboard I needed to determine 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.

Enjoy Drawing! 😉

Any idea on how to draw this shape?

I see you already got the half of the solution of your question, in your image you have all points you need to draw your shape, just draw them on the canvas as I did in my example!

In your shape, if you assumed your shape needs for (16×16) to be drawn then for example:

• the top point is Offset(size.width* (8/16), 0)
• the left top point is Offset(size.width* (2/16) size.height * (6/16))

how draw this shape (bottom sheet)?

@xDevoo
Actually you shape is pretty similar to the shape which I implemented here, so you can get inspired by it.
Also, here is a short tutorial about Flutter Custom Decoration
https://medium.com/flutter-community/flutter-custom-decoration-eba31253be0b
and currently, I'm writing a more detailed tutorial about Flutter Custom Painter, I'll post it here as soon as it got published.

how draw this shape (bottom sheet)?

did you solve this?

did you solve this?

@nbnD
No, because I created something like this