Custom Painter; path
2 min readApr 24, 2019
Now, lets add some bakwas to custom painter. We are going to use a path for painting the screen. These path can be derived from line, circles, rectangles, polygons etc.
//main.dart
import 'package:flutter/material.dart';import 'path_painter.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Painter',
home: PathPainter(),
);
}
}//path_painter.dartimport 'package:flutter/material.dart';class PathPainter extends StatefulWidget {@override
_PathPainterState createState() => _PathPainterState();
}class _PathPainterState extends State<PathPainter> with SingleTickerProviderStateMixin {
AnimationController _controller;@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}@override
void dispose() {
super.dispose();
_controller.dispose();
}@override
Widget build(BuildContext context) {
return CustomPaint(
size: Size(MediaQuery.of(context).size.width,
MediaQuery.of(context).size.height),
painter: DrawPath(),
);
}
}class DrawPath extends CustomPainter {
Map<String, double> center;
double radius;@override
void paint(Canvas canvas, Size size) {
Paint brush = new Paint()
..color = Colors.red
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = 20;//canvas.drawArc(Rect.fromLTRB(50, 50, 200, 200), (40*3.14)/180, (90*3.14)/180, false, brush);
//canvas.drawRect(Rect.fromLTRB(250, 100, 300, 200), brush);
//canvas.drawOval(Rect.fromLTRB(100, 300, 300, 250), brush);
//canvas.drawRRect(RRect.fromLTRBR(100, 350, 150, 600, Radius.circular(15)), brush);
//canvas.drawPaint(brush);List<Offset> polygonPath = new List(4);
polygonPath[0] = Offset(40, 500);
polygonPath[1] = Offset(80, 450);
polygonPath[2] = Offset(40, 400);
polygonPath[3] = Offset(80, 350);Path path = new Path();
path.moveTo(60, 130);
path.lineTo(50, 80);
path.addRect(Rect.fromLTRB(60, 130, 200, 200));
path.addArc(Rect.fromLTRB(100, 200, 250, 350), (300*3.14)/180, (200*3.14)/180 );
path.addPath(path, Offset(70, 250));
path.lineTo(40, 500);
path.addPolygon(polygonPath, false);
path.addOval(Rect.fromLTRB(80, 350, 40, 300));
path.addRRect(RRect.fromLTRBR(80, 280, 40, 220, Radius.circular(30)));
path.arcTo(Rect.fromLTRB(60, 230, 150, 350), (250*3.14)/180, (90*3.14)/180, true);
path.arcToPoint(Offset(300, 300), radius: Radius.circular(100));
canvas.drawPath(path, brush);
}@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return true;
}
}
And you will this beautiful piece of art.