How to Draw a Triangle using Canvas in Flutter?

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 {
  @
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()..color = Colors.green);
  }
  @
override

  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

Hope this example will be useful to you.

Thanks,

Srikanth

How to Draw a Triangle using Canvas in Flutter?

0 Comments

Recent Comments