How to draw container with half circle in flutter - flutter

I have to design screen like above image:
I want to draw white background portion in the above image. I have try by using custom paint with clip path but I can't achieve like the image.
Here is my code:
class CommomContainer extends CustomClipper<Path> {
CommomContainer({#required this.holeRadius});
final double holeRadius;
#override
Path getClip(Size size) {
final path = Path()
..moveTo(0, 0)
..lineTo(size.width / 2 - holeRadius - 10, 0.0)
..quadraticBezierTo(
size.width / 2 - holeRadius, 0.0, size.width / 2 - holeRadius, 10.0)
..arcToPoint(
Offset(size.width / 2 + holeRadius, 0.0),
clockwise: false,
radius: Radius.circular(2),
)
..lineTo(size.width, 0.0)
..lineTo(size.width, size.height);
path.lineTo(0.0, size.height);
path.close();
return path;
}
#override
bool shouldReclip(CommomContainer oldClipper) => true;
}
Any help is appreciated.

Here you can use Shape Maker and I used that too. You can change stroke style from PaintingStyle.stroke to PaintingStyle.fill to fill the desired color.
class MyCustomPainter extends CustomPainter{
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.stroke
..strokeWidth = 1;
Path path_0 = Path();
path_0.moveTo(0,0);
path_0.lineTo(size.width,0);
path_0.lineTo(size.width,size.height);
path_0.lineTo(0,size.height);
path_0.lineTo(0,0);
path_0.close();
canvas.drawPath(path_0, paint_0);
Paint paint_1 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.stroke
..strokeWidth = 1;
Path path_1 = Path();
path_1.moveTo(size.width*0.3071375,size.height*0.3273600);
path_1.cubicTo(size.width*0.3067750,size.height*0.1999400,size.width*0.3815000,size.height*0.1964000,size.width*0.4125000,size.height*0.2000000);
path_1.cubicTo(size.width*0.4514375,size.height*0.3614200,size.width*0.5514000,size.height*0.3594200,size.width*0.5875000,size.height*0.2000000);
path_1.quadraticBezierTo(size.width*0.6656000,size.height*0.1954200,size.width*0.6943500,size.height*0.3273600);
path_1.quadraticBezierTo(size.width*0.6943500,size.height*0.6060200,size.width*0.6943500,size.height*0.6990200);
path_1.quadraticBezierTo(size.width*0.6943500,size.height*0.8229400,size.width*0.6169000,size.height*0.8229400);
path_1.quadraticBezierTo(size.width*0.4427250,size.height*0.8229400,size.width*0.3846250,size.height*0.8229400);
path_1.quadraticBezierTo(size.width*0.3049125,size.height*0.8229600,size.width*0.3071375,size.height*0.6990200);
path_1.quadraticBezierTo(size.width*0.3071375,size.height*0.6060200,size.width*0.3071375,size.height*0.3273600);
path_1.close();
canvas.drawPath(path_1, paint_1);
Paint paint_2 = new Paint()
..color = Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.stroke
..strokeWidth = 1;
Path path_2 = Path();
path_2.moveTo(size.width*0.5000002,size.height*0.0804608);
path_2.cubicTo(size.width*0.5273750,size.height*0.0804200,size.width*0.5684875,size.height*0.1111200,size.width*0.5684620,size.height*0.1899997);
path_2.cubicTo(size.width*0.5684875,size.height*0.2338200,size.width*0.5479250,size.height*0.2995600,size.width*0.5000002,size.height*0.2995385);
path_2.cubicTo(size.width*0.4726125,size.height*0.2995600,size.width*0.4315250,size.height*0.2667000,size.width*0.4315384,size.height*0.1899997);
path_2.cubicTo(size.width*0.4315250,size.height*0.1462000,size.width*0.4520625,size.height*0.0804200,size.width*0.5000002,size.height*0.0804608);
path_2.close();
canvas.drawPath(path_2, paint_2);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}

Try this, I have used stack and then I have put 2 concentric circle on top of rectangle.
Scaffold(
backgroundColor: Colors.yellow,
body: Center(
child: Stack(
alignment: Alignment.topCenter,
clipBehavior: Clip.none,
children: [
Card(
color: Colors.white,
child: Container(
height: 300,
width: 300,
),
),
Positioned(
top: -50,
child: Container(
height: 100,
width: 100,
// color: Colors.yellow,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.yellow),
),
),
Positioned(
top: -40,
child: Container(
height: 80,
width: 80,
// color: Colors.yellow,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
),
)
],
),));

Related

Flutter canvas draw arc

Im trying to draw the ticket model using dart canvas.
But I just can't draw those semi-circles. path.arcToPoint seems not to work.
Try this demo:
import 'package:flutter/material.dart';
class Ticket extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.orange
..strokeWidth = 2
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round;
Path path = Path();
//top
path.moveTo(50, 0);
path.lineTo(50, 150);
path.arcToPoint(const Offset(70, 170), radius: const Radius.circular(20));
path.lineTo(300, 170);
path.arcToPoint(const Offset(320, 150), radius: const Radius.circular(20));
path.lineTo(320, 0);
//bottom
path.moveTo(70, 170);
path.lineTo(300, 190);
path.arcToPoint(const Offset(320, 210), radius: const Radius.circular(20), clockwise: false);
path.lineTo(310, 290);
path.arcToPoint(const Offset(290, 300), radius: const Radius.circular(20));
path.lineTo(60, 280);
path.arcToPoint(const Offset(40, 260), radius: const Radius.circular(20));
path.lineTo(50, 190);
path.arcToPoint(const Offset(70, 170), radius: const Radius.circular(20), clockwise: false);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(Ticket oldDelegate) => false;
#override
bool shouldRebuildSemantics(Ticket oldDelegate) => false;
}
use:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: CustomPaint(
painter: Ticket(),
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
),
);
}

Clip Container inside CustomPainter

i made this shape using CustumPainter Class , i want the container color to fill only the shape , like a full charged battery
this is how i made the shape
void paint(Canvas canvas, Size size) {
var paint = Paint();
var path = Path();
paint.color = Colors.black;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 4.0;
var posX;
var posY;
path.lineTo(size.width*0.75, 0);
path.lineTo(size.width*0.75, size.height*0.25);
path.lineTo(size.width*0.75, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 0);
path.moveTo(size.width*0.75, size.height*0.25);
path.lineTo(size.width*0.80, size.height*0.25);
path.lineTo(size.width*0.80, size.height*0.75);
path.lineTo(size.width*0.75, size.height*0.75);
canvas.drawPath(path, paint);
}
and this is my widget
return ClipRRect(
child: Container(
width: 100,
color: Colors.red,
height: 50,
child: CustomPaint(
child: Container(
),
painter: BatteryPainter(),
),
),
);
Create another Path/rect inside Painter to handle fill color property , Also include Paint()..strokeCap = StrokeCap.round for better look on outer side.
, pass the value to control fill color.
class BatteryPainter extends CustomPainter {
final Color fillColor;
final double value;
BatteryPainter({
required this.value,
this.fillColor = Colors.red,
});
#override
void paint(Canvas canvas, Size size) {
var paint = Paint()..strokeCap = StrokeCap.round;
var path = Path();
paint.color = Colors.black;
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 4.0;
path.lineTo(size.width * 0.75, 0);
path.lineTo(size.width * 0.75, size.height * 0.25);
path.lineTo(size.width * 0.75, size.height);
path.lineTo(0, size.height);
path.lineTo(0, 0);
path.moveTo(size.width * 0.75, size.height * 0.25);
path.lineTo(size.width * 0.80, size.height * 0.25);
path.lineTo(size.width * 0.80, size.height * 0.75);
path.lineTo(size.width * 0.75, size.height * 0.75);
Rect rect = Rect.fromLTWH(0, 0, size.width * 0.75 * value, size.height);
canvas.drawPath(path, paint);
canvas.drawRect(
rect,
Paint()
..color = fillColor
..style = PaintingStyle.fill);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Use
Container(
width: 100,
height: 50,
child: CustomPaint(
painter: BatteryPainter(value: value),
),
),
To get a custom shape you must be using clipPath instead of clip Rect
ClipPath(
clipper: CustomPath(),
child: Container(
width: double.infinity,
height: 500,
color: Colors.amberAccent,
),
),
More about clipPath

How to create a container with a sharp arrow on its edge in flutter

I want to create a Container, which has a sharp triangle type figure or arrow on its edge, exactly like in the picture below. If there is a pre-defined widget for funtions like this, please do tell me.
You can use CustomPainter,try this
Container(
child:Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment:CrossAxisAlignment.end,
children:[
Container(
child:CustomPaint(
painter: TrianglePainter(
strokeColor: Colors.red,
strokeWidth: 10,
paintingStyle: PaintingStyle.fill,
),
child: Container(
height: 10,
width: 20,
),
)
),
Container(
color:Colors.red,
height:2,
width:100,
),
Container(
color:Colors.blue,
height:20,
width:100,
)
]
)
)
Triangle Painter Class:
class TrianglePainter extends CustomPainter {
final Color strokeColor;
final PaintingStyle paintingStyle;
final double strokeWidth;
TrianglePainter({this.strokeColor = Colors.black, this.strokeWidth = 3, this.paintingStyle = PaintingStyle.stroke});
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = strokeColor
..strokeWidth = strokeWidth
..style = paintingStyle;
canvas.drawPath(getTrianglePath(size.width, size.height), paint);
}
Path getTrianglePath(double x, double y) {
return Path()
..moveTo(0, y)
..lineTo(x / 2, 0)
..lineTo(x, y)
..lineTo(0, y);
}
#override
bool shouldRepaint(TrianglePainter oldDelegate) {
return oldDelegate.strokeColor != strokeColor ||
oldDelegate.paintingStyle != paintingStyle ||
oldDelegate.strokeWidth != strokeWidth;
}
}

Flutter How to create box container in price tag shape

How to create this corner-shaped card view in a flutter container..
You can archive this in several ways, using
Container Decoration
ClipPath
CustomPaint
Here is a demo of using CustomPaint, modify the value the way you like.
Result
Painter
class PriceTagPaint extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.green
..strokeCap = StrokeCap.round
..style = PaintingStyle.fill;
Path path = Path();
path
..moveTo(0, size.height * .5)
..lineTo(size.width * .13, 0)
..lineTo(size.width, 0)
..lineTo(size.width, size.height)
..lineTo(size.width * .13, size.height)
..lineTo(0, size.height * .5)
..close();
canvas.drawPath(path, paint);
//* Circle
canvas.drawCircle(
Offset(size.width * .13, size.height * .5),
size.height * .15,
paint..color = Colors.white,
);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => false;
}
And use
SizedBox(
height: 100,
width: 300,
child: CustomPaint(
painter: PriceTagPaint(),
child: Center(
child: Text(
"Coolant",
style: TextStyle(
fontSize: 44,
),
),
),
),
);
Check on dartpad or on gist

CustomPaint inside custom button flutter

I have a custom button that I plan to reuse over and over again.
How can I put a CustomPainter into CustomButtom, with the condition that it also changes its internal state?
class CustomButton extends StatelessWidget {
CustomButton({this.icon, this.text, this.onPressed});
final Icon icon;
final Text text;
final Function onPressed;
#override
Widget build(BuildContext context) {
return RawMaterialButton(
onPressed: onPressed,
elevation: 2.0,
fillColor: Colors.lightGreenAccent,
child: SizedBox(
width: 90,
height: 90,
child: Column(
children: [
icon,
text,
Container(
height: 15,
width: 70,
decoration: new BoxDecoration(
color: Colors.red,
borderRadius: new BorderRadius.all(Radius.elliptical(45, 10)),
),
),
],
),
),
padding: EdgeInsets.all(5.0),
shape: CircleBorder(),
);
}
}
How can I implement a smile animation that should not be a rotation, but a transition from one state to another?
Smooth redrawing of the CustomPaint part when the button is pressed
class SmileyPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
final radius = 100.0;
final center = Offset(150, 120);
// Body
final paint = Paint()..color = Colors.yellow;
canvas.drawCircle(center, radius, paint);
// Eyes
canvas.drawOval(
Rect.fromCenter(
center: Offset(center.dx + radius / 3, center.dy - radius / 3),
width: 25,
height: 60),
Paint());
canvas.drawOval(
Rect.fromCenter(
center: Offset(center.dx - radius / 3, center.dy - radius / 3),
width: 25,
height: 60),
Paint());
final paintMouth = Paint()
..color = Colors.black
..style = PaintingStyle.stroke
..strokeWidth = 10;
Path path = Path();
path.moveTo(200, 150);
path.quadraticBezierTo(150, 200, 100, 150);
path.moveTo(200, 150);
path.quadraticBezierTo(150, 220, 100, 150);
canvas.drawPath(path, paintMouth);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}