in this link we have solved design wave quadraticBezierTo, but that's half of wave quadraticBezierTo and i want to have full design like with this screen shot:
and now my question is how can we change this below code to have another half design on right side of that
this below class make this
class WaveClipperTwo extends CustomClipper<Path> {
bool reverse;
WaveClipperTwo({this.reverse = false});
final int _coefficient = 16;
double get _minStep => 1 / _coefficient;
double get _preCenter => _minStep * (_coefficient / 2 - 1);
double get _postCenter => _minStep * (_coefficient / 2 + 1);
double get _preEnd => _minStep * (_coefficient - 2);
#override
Path getClip(Size size) {
var path = Path();
path.moveTo(0.0, 0.0);
if(!reverse) {
path.lineTo(0.0, size.height - 20.0);
path.lineTo(size.width * _preCenter, size.height - 20.0);
path.cubicTo(size.width/2, size.height - 20.0, size.width/2, size.height - 40.0, size.width * _postCenter, size.height - 40.0);
path.lineTo(size.width * _preEnd, size.height - 40.0);
path.quadraticBezierTo(size.width, size.height - 40.0, size.width, size.height - 20.0);
path.lineTo(size.width, 0.0);
path.close();
}else{
path.lineTo(0.0, 20);
path.lineTo(size.width * _preCenter, 20.0);
path.cubicTo(size.width/2, 20.0, size.width/2, 40.0, size.width * _postCenter, 40.0);
path.lineTo(size.width * _preEnd, 40.0);
path.quadraticBezierTo(size.width, 40, size.width, 20.0);
path.lineTo(size.width, 0.0);
path.close();
}
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Here you are:
Change innerWidth constant when you want to make middle part wider or narrower.
class TopFeedsWaveCurve extends CustomClipper<Path> {
final double innerWidth = 100;
final double innerHeight = 20;
final double topOffcet = 60;
#override
Path getClip(Size size) {
var halfW = innerWidth / 2;
var height = innerHeight + topOffcet;
var path = Path()
..moveTo(0.0, 0.0)
..lineTo(0.0, topOffcet)
..lineTo(size.width / 2 - halfW - innerHeight, topOffcet)
..cubicTo(
size.width / 2 - halfW,
topOffcet,
size.width / 2 - halfW,
height,
size.width / 2 - halfW + innerHeight,
height,
)
..lineTo(size.width / 2 + halfW - innerHeight, height)
..cubicTo(
size.width / 2 + halfW,
height,
size.width / 2 + halfW,
topOffcet,
size.width / 2 + halfW + innerHeight,
topOffcet,
)
..lineTo(size.width, topOffcet)
..lineTo(size.width, 0);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
Related
How to implement effect like pic below.
I have a rect container(width:400, height:100), I want to clip the blue area of the rect, so I can get the orange area.Attention,
The orange arc is tangent to the bottom line . Could you give the details code?
You can use a Custom Clipper class , to get this type of shape I will share an example code you can change values according to your need
class ClipPathClass extends CustomClipper<Path> {
#override
Path getClip(Size size) {
double radius = 50;
var path = Path();
path.lineTo(0.0, size.height - 30);
var firstControlPoint = Offset(size.width / 4, size.height);
var firstPoint = Offset(size.width / 2, size.height);
path.quadraticBezierTo(firstControlPoint.dx, firstControlPoint.dy,
firstPoint.dx, firstPoint.dy);
var secondControlPoint = Offset(size.width - (size.width / 4), size.height);
var secondPoint = Offset(size.width, size.height - 30);
path.quadraticBezierTo(secondControlPoint.dx, secondControlPoint.dy,
secondPoint.dx, secondPoint.dy);
path.lineTo(size.width, 0.0);
path.lineTo(size.width - radius, 0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
then use this ClipPathClass() like ,
ClipPath(
clipper: ClipPathClass(),
child: Container(width:400,height: 100,color:Colors.grey)
)
I need help, I am trying to google to find out how I can implement a dotted path in canva when using canva.drawPath. I can only see code of canva.drawLine, But I can't find for canva.drawPath. Please see the code below.
import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
class CustomPainterWeb extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
double dashHeight = 5, dashSpace = 3, startY = 0;
var paint = Paint();
var path = Path();
paint.style = PaintingStyle.stroke;
paint.strokeWidth = 0.5;
paint.color = HexColor("#718096");
// First service curve
path.moveTo(size.width / 5.0, size.height / 4.2);
path.cubicTo(size.width / 5.0, size.height / 2.3, size.width / 2.0,
size.height / 3.6, size.width / 2.0, size.height / 2.3);
// First service arrow
path.moveTo(size.width / 2.0, size.height / 2.29);
path.lineTo(size.width / 1.96, size.height / 2.34);
path.moveTo(size.width / 2.0, size.height / 2.29);
path.lineTo(size.width / 2.04, size.height / 2.34);
// Second service curve
path.moveTo(size.width / 1.8, size.height / 1.8);
path.cubicTo(size.width / 1.8, size.height / 1.3, size.width * 0.3,
size.height * 0.6, size.width * 0.3, size.height / 1.3);
// second service arrow
path.moveTo(size.width * 0.30, size.height / 1.3);
path.lineTo(size.width * 0.29, size.height / 1.32);
path.moveTo(size.width * 0.299, size.height / 1.3);
path.lineTo(size.width * 0.31, size.height / 1.32);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
I have this design which i want to create
I have tried this code :
#override
Path getClip(Size size) {
var path = Path();
path.lineTo(0.0, size.height - 50);
path.lineTo(size.width / 2 - 35 , size.height -50);
path.quadraticBezierTo(size.width / 2 - 35 , size.height , size.width / 2 + 120 , size.height);
path.quadraticBezierTo(size.width /2 + 35 , size.height, size.width / 2 + 35, size.height - 50);
path.lineTo(size.width / 2 + size.width, size.height - 50);
path.lineTo(size.width, 0.0);
path.close();
return path;
}
But i am failing to do ... The result i am getting is
I can't understand what i am doing wrong. Pleas help me also i want that shadow as well after clipping at the bottom. but i am not getting that to make things visible i change the colour of scaffold to grey
Playing with the height and adding shadow to clip path i finally get close to desire result.
var path = Path();
path.lineTo(0.0, size.height - 50);
path.lineTo(size.width / 2 - 35 , size.height -50);
path.quadraticBezierTo(size.width / 2 - 35 , size.height - 25 , size.width / 2 , size.height -20);
path.quadraticBezierTo(size.width /2 + 35 , size.height -25 , size.width / 2 + 35, size.height - 50);
path.lineTo(size.width / 2 + size.width, size.height - 50);
path.lineTo(size.width, 0.0);
path.close();
return path;
The image container now looks like this
you really only need to draw one curve and not two.
Path getClip(Size size) {
final Path path = Path()
..lineTo(0, size.height - 35)
..lineTo((size.width / 2) - 50, size.height - 35)
..quadraticBezierTo(size.width / 2, size.height + 35, (size.width / 2) + 50, size.height - 35,)
..lineTo(size.width, size.height - 35)
..lineTo(size.width, 0)
..close();
return path;
}
I'm trying to create this
image with a custom clip path.
This is what I get with my
implementation, should I use an arc or a quadratic Bezier to get this curvature ?
My custom clip path:
class EventClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
double radius = 30;
Path path = Path()
..moveTo(size.width / 2, 0)
..lineTo(size.width - radius, 0)
..arcToPoint(Offset(size.width, radius),
radius: Radius.elliptical(40, 20))
..lineTo(size.width, size.height - radius)
..arcToPoint(Offset(size.width - radius, size.height),
radius: Radius.circular(radius))
..lineTo(size.width / 3, size.height)
..quadraticBezierTo(
size.width / 4, size.height, 40, (size.height / 2) - 20)
..quadraticBezierTo(40, (size.height / 2) - 20, size.width / 2, 0)
..close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
Not the same as your goal, but try this.
Path path = Path()
..moveTo(size.width / 1.5, 0)
..lineTo(size.width - radius, 0)
..arcToPoint(Offset(size.width, radius), radius: Radius.circular(radius))
..lineTo(size.width, size.height - radius)
..arcToPoint(Offset(size.width - radius, size.height), radius: Radius.circular(radius))
..lineTo(size.width / 3, size.height)
..quadraticBezierTo(size.width / 4, size.height, 40, (size.height / 2))
..quadraticBezierTo(40, (size.height / 2) - 30, size.width / 2, 0)
..close();
I am currently unable to draw a bezier curve.
The output I have right now is :
The output that I need is :
What should I add here as bezier values to get the curve?
The code snippet of the custom clipper is:
class OnBoardingClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var path = Path();
path.moveTo(0.0, size.height * 0.18);
path.lineTo(0.0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0.0);
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
P.S. Thanks for reading and apologies in case of bad formatting. :-)
You can add a quadraticBezier with values of e.g., (3 / 4 * size.width, size.height * 0.18) , (size.width, size.height * 0.05).
Code:
#override
Path getClip(Size size) {
var path = Path();
path.moveTo(0.0, size.height * 0.18);
path.quadraticBezierTo(
3 / 4 * size.width, size.height * 0.18, size.width, size.height * 0.05);
path.lineTo(size.width, size.height);
path.lineTo(0.0, size.height);
return path;
}
Result: