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 {
@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.