How to change origin of the custom paint in Flutter? - dart

Question

Code for CustomPaint:
return new Scaffold(
body:
new GestureDetector(
onTap: () {
debugPrint("hello");
},
child:
new Container(
alignment: FractionalOffset.center,
child: new CustomPaint(
size: new Size(400.0, 400.0),
painter: new BarChartPainter(currentHeight),
))),
);
//x axis code
canvas.drawLine(new Offset(0.0, 0.0), new Offset(500.0, 0.0), paintAx);```
The x axis code will draw line from (0,0) to (500,0), which is on the top of the box of the Paint. The origin is on the top left of the box. How do I change the origin so that (0,0) is at the bottom left of the paint box?
Here is the screenshot:

Answer 1

Just use the method translate in canvas: canvas.translate(0, size.height). But mind that in such a case, you will need to use negative values in the y axis.
If you want your canvas coordinates to behave like a classical graph, use the method scale:
#override
void paint(Canvas canvas, Size size) {
canvas.translate(0, size.height);
canvas.scale(1, -1);
final paint = Paint();
paint.color = Colors.black;
canvas.drawLine(Offset.zero, Offset(500, 500), paint);
}

Answer 2

I am not really sure how can you manipulate the origin of Canvas area. You can, however, apply a translation on your Offset coordinates, which should allow you to place your line where you want eventually.
I have made this simple example, it may be of help:
import "package:flutter/material.dart";
void main() {
runApp(new MaterialApp(home: new MyApp(),
));
}
class MyApp extends StatefulWidget {
#override
_MyAppState createState() => new _MyAppState();
}
class _MyAppState extends State<MyApp> {
CustomPaint _myCustomPainter = new CustomPaint(
size: new Size(400.0, 400.0),
painter: new Line(),
);
#override
Widget build(BuildContext context) {
final key = new GlobalKey<ScaffoldState>();
return new Scaffold(
key: key,
body:
new GestureDetector(
onTap: () {
debugPrint("hello");
},
child:
new Container(
alignment: FractionalOffset.center,
child: _myCustomPainter
),
),);
}
}
class Line extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
// canvas.translate(0.0, 100.0);
canvas.drawLine(new Offset(100.0, -50.0).translate(0.0, 100.0),
new Offset(0.0, 100.0).translate(0.0, 100.0),
new Paint()
);
}
#override
bool shouldRepaint(Line oldDelegate) {
// Since this Line painter has no fields, it always paints
// the same thing, and therefore we return false here. If
// we had fields (set from the constructor) then we would
// return true if any of them differed from the same
// fields on the oldDelegate.
return false;
}
}