flutterflutter-canvas

Flutter : How to draw a vertical sine wave inside a container?


How can I draw something like this inside a container in flutter?. PS I am new to flutter. Thanks in advance.

image


Solution

  • You can try this, the idea is using multiple quadraticBezierTo. Remember that B, C, D should be on the same line to make the joint smooth:

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          home: Scaffold(
            body: Center(
              child: Container(
                width: 300,
                height: 700,
                color: Colors.yellow,
                child: CustomPaint(painter: FaceOutlinePainter()),
              ),
            ),
          ),
        );
      }
    }
    
    class FaceOutlinePainter extends CustomPainter {
      @override
      void paint(Canvas canvas, Size size) {
        Paint paint = Paint()
          ..color = Colors.red
          ..style = PaintingStyle.stroke
          ..strokeWidth = 8.0;
    
        Path path = Path();
        path.moveTo(size.width / 2, 0); //Ax, Ay
        path.quadraticBezierTo(size.width, size.height / 8, size.width / 2, size.height / 4); //Bx, By, Cx, Cy
        path.quadraticBezierTo(0, 3 * size.height / 8, size.width / 2, size.height / 2); //Dx, Dy, Ex, Ey
        canvas.drawPath(path, paint);
      }
    
      @override
      bool shouldRepaint(FaceOutlinePainter oldDelegate) => false;
    }
    

    enter image description here