I want to draw an arc which automatically occupies the width of the screen. For this I tried the following code:
class ArcPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
// create a bounding square, based on the centre and radius of the arc
Rect rect = new Rect.fromPoints(new Offset(0.0, -45.0),new Offset(372.0, 45.0));
// a fancy rainbow gradient
final Gradient gradient = new RadialGradient(
colors: <Color>[
Colors.white.withOpacity(1.0),
],
stops: [
0.0,
],
);
// create the Shader from the gradient and the bounding square
final Paint paint = new Paint()..shader = gradient.createShader(rect);
// and draw an arc
canvas.drawArc(rect, 0.0 , pi, true, paint);
}
@override
bool shouldRepaint(ArcPainter oldDelegate) {
return true;
}
}
This does my work but I want the rect in Rect rect = new Rect.fromPoints(new Offset(0.0, -45.0),new Offset(372.0, 45.0)); to occupy the full screen width.
I already tried Rect rect = new Rect.fromLTWH(0.0, -45.0, size.width, 45.0); but the arc disappears in this case.
So I figured out the mistake:
I had not given any size while calling this class and thus the size.width and size.height was coming 0.
I changed the code in main build from:
new Row(
children: <Widget>[
new CustomPaint(
painter: new ArcPainter(),
],
),
To:
new Row(
children: <Widget>[
new Container(
width: screen_width * 1,
height: screen_height * 0.05,
child:
new CustomPaint(
painter: new ArcPainter(),
)
)
],
),
and finally in the ArcPainter:
Rect rect = new Rect.fromPoints(new Offset(0.0, - size.height),new Offset(size.width, size.height));
Note: double screen_width = MediaQuery.of(context).size.width; double screen_height = MediaQuery.of(context).size.height;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.