How to Create Any Types of Shape Using svg Code in Flutter?

Sometimes it is difficult to make different shapes in Flutter. So no need to worry now You can make any shape if you have svg file or code of that shape. Now you can generate any shape without using any packages. If you don’t have the shape in svg file or svg code then you can create it from figma and export it as an SVG. We will make a heart in flutter using svg file. To integrate into Flutter, first, create a new project or you can use an existing project also.

flutter create .

Get any shape in svg that you want to add in your flutter project. Now to get the code of the custom painter upload this svg file or paste the code of svg file to this url and press the get code button.

Video Explanation:

You will get a code like this

Dart

import 'dart:ui' as ui;

// Add this CustomPaint
// widget to the Widget Tree
CustomPaint(
    size: Size(WIDTH, (WIDTH*1).toDouble()),
    painter: RPSCustomPainter(),
)

// Copy this CustomPainter code
// to the Bottom of the File
class RPSCustomPainter extends CustomPainter {
    @override
    void paint(Canvas canvas, Size size) {

Path path_0 = Path();
    path_0.moveTo(size.width*0.5000000,size.height*0.1717500);
    path_0.lineTo(size.width*0.4551875,size.height*0.1256875);
    path_0.cubicTo(size.width*0.3500000,size.height*0.01756250,size.width*0.1571250,size.height*0.05487500,size.width*0.08750000,size.height*0.1908125);
    path_0.cubicTo(size.width*0.05481250,size.height*0.2547500,size.width*0.04743750,size.height*0.3470625,size.width*0.1071250,size.height*0.4648750);
    path_0.cubicTo(size.width*0.1646250,size.height*0.5783125,size.width*0.2842500,size.height*0.7141875,size.width*0.5000000,size.height*0.8621875);
    path_0.cubicTo(size.width*0.7157500,size.height*0.7141875,size.width*0.8353125,size.height*0.5783125,size.width*0.8928750,size.height*0.4648750);
    path_0.cubicTo(size.width*0.9525625,size.height*0.3470000,size.width*0.9452500,size.height*0.2547500,size.width*0.9125000,size.height*0.1908125);
    path_0.cubicTo(size.width*0.8428750,size.height*0.05487500,size.width*0.6500000,size.height*0.01750000,size.width*0.5448125,size.height*0.1256250);
    path_0.lineTo(size.width*0.5000000,size.height*0.1717500);
    path_0.close();
    path_0.moveTo(size.width*0.5000000,size.height*0.9375000);
    path_0.cubicTo(size.width*-0.4583125,size.height*0.3042500,size.width*0.2049375,size.height*-0.1900000,size.width*0.4890000,size.height*0.07143750);
    path_0.cubicTo(size.width*0.4927500,size.height*0.07487500,size.width*0.4964375,size.height*0.07843750,size.width*0.5000000,size.height*0.08212500);
    path_0.arcToPoint(Offset(size.width*0.5110000,size.height*0.07150000),radius: Radius.elliptical(size.width*0.1950000, size.height*0.1950000),rotation: 0 ,largeArc: false,clockwise: true);
    path_0.cubicTo(size.width*0.7950000,size.height*-0.1901250,size.width*1.458312,size.height*0.3041875,size.width*0.5000000,size.height*0.9375000);
    path_0.close();

Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = Color(0xff000000).withOpacity(1.0);
canvas.drawPath(path_0,paint_0_fill);

}

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

Import the things if you have created a new file. Now copy the code after this comment in the new file or bottom of the file where you want to make the code. Copy the Custom painter code (Code before this comment) and paste it where you want to show the shape. Use that like this where you want to.

Dart

class MyHomePage extends StatefulWidget {
  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    double width = size.width;

    // It refers to width of the shape and height
    // is automatically  calculated  from width
    return Scaffold(
      appBar: AppBar(
        title: const Text("Geeks for Geeks"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CustomPaint(
              size: Size(
                  width,
                  (width * 1)
                      .toDouble()),
              painter: RPSCustomPainter(),
            )
          ],
        ),
      ),
    );
  }
}

You can use this code to make any type of shape if you have svg file of that shape. If you want to change the color of the shape then you set that on the highlighted path and you also change the different paint style in it.