Question 301907 in Flutter Question posted in
The official Flutter documentation can be found here.

How can i draw the below shape in flutter

This is the shape i need.
screenshot

I tried with customclipper but did not got expected output.

int curveHeight = 20;
Offset controlPoint = Offset(size.width / 2, size.height + curveHeight);
Offset endPoint = Offset(size.width , size.height - curveHeight);

Path path = Path()
  ..lineTo(0, size.height - curveHeight)
  ..quadraticBezierTo(controlPoint.dx , controlPoint.dy , endPoint.dx , endPoint.dy )
  ..lineTo(size.width , 0)
  ..close();

output screenshot

Tags:

2

Answers


  1. 0

    I am using CustomPaint for this. You can also use arcToPoint while the control points will be used to shift on semantic shape.

    class CustomHeaderPaint extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    final circleRadius =
        size.width / 4; //use math.min if you want the smallest side

    Path path = Path()
      ..lineTo(circleRadius, 0)
      ..arcToPoint(
        Offset(0, circleRadius),
        radius: Radius.circular(circleRadius * .8), //play with this value
        clockwise: true,
      );
    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.deepPurple
          ..style = PaintingStyle.fill);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}

    The similar thing is for brazier curve

    void paint(Canvas canvas, Size size) {
    final circleRadius =
        size.width / 4; //use math.min if you want the smallest side

    double x1 = circleRadius * .95; //play with this value
    double y1 = circleRadius * .95;

    Path path = Path()
      ..lineTo(circleRadius, 0)
      ..quadraticBezierTo(x1, y1, 0, circleRadius);
    canvas.drawPath(
        path,
        Paint()
          ..color = Colors.deepPurple
          ..style = PaintingStyle.fill);
  }
    Login or Signup to reply.
  2. 0 
    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: CustomPaint(
  size: Size(500,(500*0.5833333333333334).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
  painter: RPSCustomPainter(),
),
        ),
      ),
    );
  }
}

class RPSCustomPainter extends CustomPainter{
  
  @override
  void paint(Canvas canvas, Size size) {
    
    

  // Circle
  
  Paint paint_fill_1 = Paint()
      ..color = const Color.fromARGB(255, 34, 54, 251)
      ..style = PaintingStyle.fill
      ..strokeWidth = size.width*0.00
      ..strokeCap = StrokeCap.butt
      ..strokeJoin = StrokeJoin.miter;
     
         
    Path path_1 = Path();
    path_1.moveTo(size.width*0.0810583,size.height*0.0007714);
    path_1.cubicTo(size.width*0.1124917,size.height*0.0007714,size.width*0.1707333,size.height*0.1402714,size.width*0.1449250,size.height*0.2287286);
    path_1.cubicTo(size.width*0.1208417,size.height*0.3211429,size.width*0.0559583,size.height*0.3214286,size.width*0.0009417,size.height*0.3214286);
    path_1.cubicTo(size.width*0.0001000,size.height*0.2538000,size.width*0.0003750,size.height*0.2487714,size.width*0.0009417,size.height*0.0046571);
    path_1.cubicTo(size.width*0.0159167,size.height*0.0133286,size.width*-0.0456000,size.height*0.0026857,size.width*0.0810583,size.height*0.0007714);
    path_1.close();

    canvas.drawPath(path_1, paint_fill_1);
  

  // Circle
  
  Paint paint_stroke_1 = Paint()
      ..color = const Color.fromARGB(255, 33, 150, 243)
      ..style = PaintingStyle.stroke
      ..strokeWidth = size.width*0.00
      ..strokeCap = StrokeCap.butt
      ..strokeJoin = StrokeJoin.miter;
     
         
    
    canvas.drawPath(path_1, paint_stroke_1);
  
    
  }

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

    enter image description here

    If you want more custom designs use this site

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search