html canvas drawrect 变形,flutter - Canvas.drawRect() with Rect.fromLTRB() not working - Stack Overflo...

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.