I am trying to make a game level map UI with flutter. I am trying to do this with Custompainter. I can draw path line but don't know how to get this level pointers and add buttons/image widget to those points. I didn't find good solution in web.
My code below:
class LinePainter extends CustomPainter {
int totalLevel ;
LinePainter(this.totalLevel);
#override
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = AppColors.primaryColor
..style = PaintingStyle.stroke
..strokeWidth = 10;
var path = Path();
path.moveTo(0, size.height * 0.125);
path.lineTo(size.width- 50, size.height * 0.125);
path.lineTo(size.width- 50, size.height * 0.375);
path.lineTo(50, size.height * 0.375);
path.lineTo(50, size.height * 0.625);
path.lineTo(size.width- 50, size.height * 0.625);
path.lineTo(size.width- 50, size.height * 0.875);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}}
Please help to find best solution.
Related
I'm trying to clip a widget using ClipPath CustomClipper -> so far I was able to recreate a wave shape
ClipPath(
clipper: WaveClipper(),
child: CustomWidget(),
);
class WaveClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
var path = new Path();
path.lineTo(
0, size.height);
var firstStart = Offset(size.width / 5, size.height);
var firstEnd = Offset(size.width / 2.25, size.height - 50.0);
path.quadraticBezierTo(
firstStart.dx, firstStart.dy, firstEnd.dx, firstEnd.dy);
var secondStart =
Offset(size.width - (size.width / 3.24), size.height - 105);
var secondEnd = Offset(size.width, size.height - 10);
path.quadraticBezierTo(
secondStart.dx, secondStart.dy, secondEnd.dx, secondEnd.dy);
path.lineTo(
size.width, 0);
path.close();
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) {
return false; //if new instance have different instance than old instance
//then you must return true;
}
but what I would need to achieve is this pink shape shown on this image :
the top part does not need to be clipped as it's the edge of the screen, only the bottom
Maybe it's not exactly how you want it, but with small adjustments it stays the same, you have to pay attention to where you left off to start correctly
class CustomClipperImage extends CustomClipper<Path> {
#override
bool shouldReclip(CustomClipper oldClipper) {
return false;
}
#override
getClip(Size size) {
var path = Path();
path.lineTo(0, size.height-70);
path.quadraticBezierTo(0, size.height+40,size.width-40, size.height-
130);
path.quadraticBezierTo(size.width+60, size.height-170,size.width, 0);
path.close();
return path;
}
}
Did you see flutter_custom_clippers package? I think its source code will be helpfull.
I am searching for a package in flutter where I can create a chart with an interactable graph, where I can manipulate data with drag and drop
Example:
An example chart
Now I want to ajust each value in that step diagram with drag and drop (up and down)
I found high charts and some of my collegues used that to do so but not in flutter so im not sure if that is possible there.
Firstly, It's totally possible to create interactive charts with Flutter.
You can either implement it yourself with a CustomPainter and some widgets.
Here's an example of a Curved basic chart.
CustomPaint(
painter: CurveBackground(color: \\ yourColor),
child: \\ your child
)
class CurveBackground extends CustomPainter {
final Color color;
CurveBackground({this.color});
#override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = color;
paint.style = PaintingStyle.fill;
var path = Path();
path.moveTo(0, Dimens.size_30());
path.quadraticBezierTo(size.width * 0.4, size.height * 0.1,
size.width * 0.3, size.height * 0.3);
path.quadraticBezierTo(size.width * 0.1, size.height * 0.6,
size.width * 0.45, size.height * 0.7);
path.quadraticBezierTo(
size.width * 1, size.height * 0.9, size.width * 0.9, size.height * 1.0);
path.lineTo(size.width, size.height);
path.lineTo(0, size.height);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
You can also check out some specialized packages as: syncfusion_flutter_charts
I think you'll be interested in the step_line chart.
How do you rotate an object drawn on a canvas in Flutter (not the whole canvas, just the object)?
The following does not work. Error is: This expression has a type of 'void' so its value can't be used.
Transform.rotate(
angle: pi,
child: canvas.drawPath(
getTrianglePath(Offset(secondhandX, secondhandY)),
secondhandBrush));
Here is the full code:
// imports omitted
class TimerDialPainter extends CustomPainter {
Path getTrianglePath(Offset position) {
return Path()
..moveTo(position.dx - 20, position.dy - 20)
..lineTo(position.dx + 40, position.dy + 40)
..lineTo(position.dx - 20, position.dy + 40)
..lineTo(position.dx - 20, position.dy - 20);
}
#override
void paint(Canvas canvas, Size size) {
int centerX = size.width / 2;
int centerY = size.height / 2;
int secondsArc = 60;
Paint countBrush = Paint()
..color = (Colors.red)
..style = PaintingStyle.fill
..strokeWidth = 3;
var secondhandX = centerX + 80 * cos(secondsArc * pi / 180);
var secondhandY = centerY + 80 * sin(secondsArc * pi / 180);
Transform.rotate(
angle: pi/3,
child: canvas.drawPath(
getTrianglePath(Offset(secondhandX, secondhandY)),
countBrush));
} //I feel this is not a right place to solve this??
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Try rotating the canvas and paint it. Then rotate it back to previous value
#override
void paint(Canvas canvas, Size size) {
double centerX = size.width / 2;
double centerY = size.height / 2;
int secondsArc = 60;
Paint countBrush = Paint()
..color = (Colors.red)
..style = PaintingStyle.fill
..strokeWidth = 3;
num secondhandX = centerX + 80 * cos(secondsArc * pi / 180);
num secondhandY = centerY + 80 * sin(secondsArc * pi / 180);
canvas.rotate(40);
canvas.drawPath(
getTrianglePath(Offset(secondhandX.toDouble(), secondhandY.toDouble())),
countBrush);
canvas.rotate(0);
}
I want to draw animated border around the square container with infinity loop (never stop) like this photo , I'm trying animated container bust not help me
so can anyone tell me how to implement line animation
Edit **
I'm using this code to draw the square but I can't make it build with animation
class RadialPainter extends CustomPainter {
final double progressRemoval;
final Color color;
final StrokeCap strokeCap;
final PaintingStyle paintingStyle;
final double strokeWidth;
final double progress;
RadialPainter(
{this.progressRemoval,
this.color,
this.strokeWidth,
this.strokeCap,
this.paintingStyle,
this.progress});
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..strokeWidth = strokeWidth
..color = color
..style = paintingStyle
..strokeCap = strokeCap;
var progressRemoval = 0.50;
var path = Path();
//LINEA SUPERIOR DEL CUADRADO
path.moveTo((size.width * 0.30), 0);
path.quadraticBezierTo((size.width * 0.30), 0, size.width, 0);
//LATERAL DERECHO
path.moveTo(size.width, 0);
path.quadraticBezierTo(size.width, 0, size.width, size.height);
//LINEA INFERIOR DEL CUADRADO
path.moveTo(size.width, size.height);
path.quadraticBezierTo(size.width, size.height, 0, size.height);
//LINEA IZQUIERDA
path.moveTo(0, size.height);
path.quadraticBezierTo(0, (size.height * 0.75), 0, ((size.height * 0.75)));
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(RadialPainter oldDelegate) {
return oldDelegate.progress != progress;
}
}
enter link description here
I have this design (shown in the photo) and I am using custom paint to do it and I made it responsive. its looking good on some screens(on the left) but on wider screens(on the right), it's not looking how it suppose to, how to make it look like the one in green.
this is my custom paint code:
class CustomBottomBar extends CustomPainter {
CustomBottomBar({this.fillColor});
Color fillColor;
#override
void paint(Canvas canvas, Size size) {
Paint paint_0 = new Paint()
..color = fillColor
..style = PaintingStyle.fill
..strokeWidth = 1;
Path path_0 = Path();
path_0.moveTo(0, 0);
path_0.lineTo(size.width * 0.30, 0);
path_0.lineTo(size.width * 0.50, size.height * 0.62);
path_0.lineTo(size.width * 0.70, 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);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}