How to Draw a Triangle using Canvas in Flutter?

This Article is posted by seven.srikanth at 14-08-2019 11:16:44

In this article, I'm going to share the code for creating a Triangle using Canvas in Flutter as below.
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.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Drawing Traingle with FLutter'),
),
body: Center(
child:
Container(
child: CustomPaint(
size: Size(200, 200),
painter: DrawTriangle()
),
),
),
),
);
}
}
class DrawTriangle extends CustomPainter {
Paint _paint;
DrawTriangle() {
_paint = Paint()
..color = Colors.green
..style = PaintingStyle.fill;
}
@override
void paint(Canvas canvas, Size size) {
var path = Path();
path.moveTo(size.width/2, 0);
path.lineTo(0, size.height);
path.lineTo(size.height, size.width);
path.close();
canvas.drawPath(path, _paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
Hope this example will be useful to you.
Thanks,
Srikanth

Tags: Triangle; Canvas;



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.



Recent Articles


How to add Assets Images and Network images in flutter?

Posted by bloggeraatit on 20 Sep 2019 Article


How to use inkwell class for responding images in flutter?

Posted by bloggeraatit on 20 Sep 2019 Article


Flutter Web Live on Server

Posted by nikhilchaudhary12155 on 18 Sep 2019 Article


How to specify stops in a gradient?

Posted by seven.srikanth on 20 Sep 2019 Article



© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com