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. The CustomPainter class has its inbuilt Paint method which can draw almost every type of shape in flutter apps. So in this tutorial we would Create Draw Custom Triangle Shape in Flutter Android iOS Example.
Contents in this project Create Draw Custom Triangle Shape in Flutter Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create flutter’s void main runApp() method and here we would call the MyApp() our Root class.
|
1 |
void main() => runApp(MyApp()); |
3. Create our custom paint drawing class named as DrawTriangleShape extends CustomPainter. In flutter the CustomPainter class is used to render custom shapes.
|
1 2 3 4 |
class DrawTriangleShape extends CustomPainter { } |
4. Create Paint variable named as painter in DrawTriangleShape class. The Paint object is used to hold style and color of canvas object.
|
1 |
Paint painter; |
5. Create constructor() named same as class name in DrawTriangleShape class. In constructor() we would define the Object background color and style.
|
1 2 3 4 5 6 7 |
DrawTriangleShape() { painter = Paint() ..color = Colors.purpleAccent ..style = PaintingStyle.fill; } |
6. Create void paint() inbuilt method with Canvas and Size parameter in DrawTriangleShape class. Here we would set the Drawing path of canvas object.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@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); } |
7. Now we have to create the shouldRepaint() override method and returns False value in it. The shouldRepaint() Called whenever a new instance of the custom painter delegate class is provided to the [RenderCustomPaint] object.
|
1 2 3 |
bool shouldRepaint(CustomPainter oldDelegate) { return false; } |
8. Complete source code for DrawTriangleShape class.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
class DrawTriangleShape extends CustomPainter { Paint painter; DrawTriangleShape() { painter = Paint() ..color = Colors.purpleAccent ..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; } } |
9. The final step is to create the MyApp class extends with State less widget. Here we would create CustomPaint widget and pass the DrawTriangleShape class in painter parameter. We have to pass the height and width in size parameter. The height and width should be same to create fix triangle shape.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Custom Triangle Shape in Flutter App'), ), body: Center( child: CustomPaint( size: Size(180, 180), painter: DrawTriangleShape() ), ))); } } |
10. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class DrawTriangleShape extends CustomPainter { Paint painter; DrawTriangleShape() { painter = Paint() ..color = Colors.purpleAccent ..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( home: Scaffold( appBar: AppBar( title: Text('Custom Triangle Shape in Flutter App'), ), body: Center( child: CustomPaint( size: Size(180, 180), painter: DrawTriangleShape() ), ))); } } |
Screenshot:
