In this article, I'm going to share the code for creating a Triangle using Canvas in Flutter as below.
![](https://fluttercentral.com/Uploads/3652f0f9-82cd-4f45-ab4c-e53fc465a906.PNGwidth="50%height="auto](
Here is the code to create a Triangle using canvas. In order to generate the output, all you need to do is, put this code inside the main.dart file in your newly created flutter project.
color: rgb(33, 37, 41); white-space: pre-wrap;](
color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());
color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget {
color: #9cdcfe;](@
color: #9cdcfe;](override
color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext color: #9cdcfe;](context) {
color: #c586c0;](return color: #4ec9b0;](MaterialApp(
color: #9cdcfe;](home: color: #4ec9b0;](Scaffold(
color: #9cdcfe;](appBar: color: #4ec9b0;](AppBar(
color: #9cdcfe;](title: color: #4ec9b0;](Text(color: #ce9178;]('Drawing Traingle with FLutter'),
),
color: #9cdcfe;](body: color: #4ec9b0;](Center(
color: #9cdcfe;](child: color: #4ec9b0;](Container(
color: #9cdcfe;](child: color: #4ec9b0;](CustomPaint(color: #9cdcfe;](size: color: #4ec9b0;](Size(color: #b5cea8;](200, color: #b5cea8;](200), color: #9cdcfe;](painter: color: #4ec9b0;](DrawTriangle()),
),
),
),
);
}
}
color: #569cd6;](class color: #4ec9b0;](DrawTriangle color: #569cd6;](extends color: #4ec9b0;](CustomPainter {
color: #9cdcfe;](@
color: #9cdcfe;](override
color: #569cd6;](void color: #dcdcaa;](paint(color: #4ec9b0;](Canvas color: #9cdcfe;](canvas, color: #4ec9b0;](Size color: #9cdcfe;](size) {
color: #569cd6;](var color: #9cdcfe;](path = color: #4ec9b0;](Path();
color: #9cdcfe;](path.color: #dcdcaa;](moveTo(color: #9cdcfe;](size.color: #9cdcfe;](width / color: #b5cea8;](2, color: #b5cea8;](0);
color: #9cdcfe;](path.color: #dcdcaa;](lineTo(color: #b5cea8;](0, color: #9cdcfe;](size.color: #9cdcfe;](height);
color: #9cdcfe;](path.color: #dcdcaa;](lineTo(color: #9cdcfe;](size.color: #9cdcfe;](height, color: #9cdcfe;](size.color: #9cdcfe;](width);
color: #9cdcfe;](path.color: #dcdcaa;](close();
color: #9cdcfe;](canvas.color: #dcdcaa;](drawPath(color: #9cdcfe;](path, color: #4ec9b0;](Paint()..color: #9cdcfe;](color = color: #4ec9b0;](Colors.color: #9cdcfe;](green);
}
color: #9cdcfe;](@
color: #9cdcfe;](override
color: #4ec9b0;](bool color: #dcdcaa;](shouldRepaint(color: #4ec9b0;](CustomPainter color: #9cdcfe;](oldDelegate) {
color: #c586c0;](return color: #569cd6;](false;
}
}
`
color: rgb(33, 37, 41); white-space: pre-wrap;](Hope this example will be useful to you.
color: rgb(33, 37, 41); white-space: pre-wrap;](
color: rgb(33, 37, 41); white-space: pre-wrap;](Thanks,
color: rgb(33, 37, 41); white-space: pre-wrap;](Srikanth