How To Create Custom Triangle Shape In Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 09-10-2020

Triangle shape is a polygon shape with 3 edges and 3 vertices. Triangle shape is mostly used in education purpose applications where developer needs to elaborate triangle formulas with triangle diagram. In flutter we can draw triangle shape using CustomPainter class.

How To Create Custom Triangle Shape In Flutter Android App

Custom Triangle Shape 

Complete Code For  Custom Triangle Shape  In Flutter
Main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class DrawTriangleShape extends CustomPainter {
  Paint painter;
  DrawTriangleShape() {
    painter = Paint()
      ..color = Colors.orange
      ..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, painter);
  }
  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return false;
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
        home: Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.orange,
              title: Text('Custom Triangle Shape'),
            ),
            body: Center(
              child:  CustomPaint(
                  size: Size(180, 180),
                  painter: DrawTriangleShape()
              ),
            )
        )
    );
  }
}

Related Post