如何在 Flutter 中创建这种形状？

Question

Please can anyone help me ho to create this kind of shape on the top right corner of the mobile screen:

Thanks in advance.

Answer 1

You can use the Stack widget and as its child a Positioned widget with a container that has a circle, after that you can push the circle out of the screen so just a part of it is rendered

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: MyApp._title,
      home: Scaffold(
          body: Column(
        children: [
          CircleCorner(),
        ],
      )),
    );
  }
}

class CircleCorner extends StatelessWidget {
  const CircleCorner({
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return SizedBox(
      width: size.width,
      height: 300,
      child: Stack(
        children: [
          Positioned(
            top: -460,
            right: -380,
            child: Container(
               width: 600.0,
               height: 600.0,
              decoration: new BoxDecoration(
                color: Colors.black87,
                shape: BoxShape.circle,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

I'd suggest this, of course some changes must be done according to your requirement

class Demo extends StatelessWidget {
  const Demo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color: Colors.white,
        child: Stack(
          fit: StackFit.expand,
          children: [
            CustomPaint(
              painter: BackgroundPainter(),
            ),
            const Padding(
              padding: EdgeInsets.only(top: 50, right: 50),
              child: Align(
                alignment: Alignment.topRight,
                child: Icon(Icons.menu, size: 50),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class Point {
  final double _xAxis;
  final double _yAxis;

  Point(this._xAxis, this._yAxis);
}

class BackgroundPainter extends CustomPainter {
  final Paint _bluePaint;

  BackgroundPainter()
      : _bluePaint = Paint()
          ..color = Colors.lightBlue.shade300
          ..style = PaintingStyle.fill;

  @override
  void paint(Canvas canvas, Size size) {
    paintBlue(size, canvas);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;

  void paintBlue(Size size, Canvas canvas) {
    final path = Path();

    path.moveTo(size.width, 0);
    path.lineTo(size.width * 0.60, 0);

    _addPointsToPath(path, [
      Point(size.width * 0.55, size.height * 0.25),
      Point(size.width, size.height * 0.25),
    ]);

    canvas.drawPath(path, _bluePaint);
  }

  void _addPointsToPath(Path path, List<Point> points) {
    for (var i = 0; i < points.length - 2; i++) {
      final xDiff = (points[i]._xAxis + points[i + 1]._xAxis) / 2;
      final yDiff = (points[i]._yAxis + points[i + 1]._yAxis) / 2;
      path.quadraticBezierTo(points[i]._xAxis, points[i]._yAxis, xDiff, yDiff);
    }

    final secondLastPoint = points[points.length - 2];
    final lastPoint = points[points.length - 1];
    path.quadraticBezierTo(secondLastPoint._xAxis, secondLastPoint._yAxis,
        lastPoint._xAxis, lastPoint._yAxis);
  }
}