Canvas.drawRect() with Rect.fromLTRB() not working - flutter

Question

In my flutter app, I tried to use CustomPainter, to draw custom shapes.
Here, I want to draw 4 small squares, in different colors, in a bigger square (here in yellow).
I expected to see the 4 squares, but for some reason, the 4 squares are on the top left of the CustomPainter.
Here is my sample app:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Container(
color: Colors.amber,
width: 180,
height: 180,
child: CustomPaint(
painter: TestCustomPainter(),
),
),
),
);
}
}
class TestCustomPainter extends CustomPainter {
Paint _paintWhite = Paint()
..color = Colors.white
..isAntiAlias = true;
Paint _paintBlue = Paint()
..color = Colors.blue
..isAntiAlias = true;
Paint _paintRed = Paint()
..color = Colors.red
..isAntiAlias = true;
Paint _paintGreen = Paint()
..color = Colors.green
..isAntiAlias = true;
#override
void paint(Canvas canvas, Size size) {
canvas.drawRect(Rect.fromLTRB(0, 0, 90, 90), _paintWhite);
canvas.drawRect(Rect.fromLTRB(90, 0, 0, 90), _paintBlue);
canvas.drawRect(Rect.fromLTRB(0, 90, 90, 0), _paintRed);
canvas.drawRect(Rect.fromLTRB(90, 90, 0, 0), _paintGreen);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
And here is what I get:
What did I do wrong?
Thanks.

Answer 1

I think this is what you are looking for
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Container(
color: Colors.amber,
width: 180,
height: 180,
child: CustomPaint(
painter: TestCustomPainter(),
),
),
),
);
}
}
class TestCustomPainter extends CustomPainter {
Paint _paintWhite = Paint()
..color = Colors.white
..isAntiAlias = true;
Paint _paintBlue = Paint()
..color = Colors.blue
..isAntiAlias = true;
Paint _paintRed = Paint()
..color = Colors.red
..isAntiAlias = true;
Paint _paintGreen = Paint()
..color = Colors.green
..isAntiAlias = true;
#override
void paint(Canvas canvas, Size size) {
canvas.drawRect(Rect.fromLTRB(90, 0, 180, 90), _paintWhite);
canvas.drawRect(Rect.fromLTRB(90, 0, 0, 90), _paintBlue);
canvas.drawRect(Rect.fromLTRB(0, 90, 90, 180), _paintRed);
canvas.drawRect(Rect.fromLTRB(180, 180, 90,90), _paintGreen);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
since
Rect.fromLTRB(double left, double top, double right, double bottom)
Construct a rectangle from its left, top, right, and bottom edges.
more info about this over here in docs https://api.flutter.dev/flutter/dart-ui/Rect-class.html