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.
Related
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.
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;
}
}
import 'package:flutter/material.dart';
import 'dart:math' as math;
class PaintHalfHexagon extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.black
..style = PaintingStyle.fill;
Path path = Path();
path.moveTo(size.width * 0.1, size.height * 0.34);
path.quadraticBezierTo(size.width * 0.1, size.height * 0.26,
size.width * 0.3, size.height * 0.28);
path.moveTo(size.width * 0.5, size.height * 0.34);
path.quadraticBezierTo(size.width * 0.5, size.height * 0.26,
size.width * 0.3, size.height * 0.28);
path.moveTo(size.width * 0.1, size.height * 0.34);
path.lineTo(size.width * 0.5, size.height * 0.34);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
// return oldDelegate._lineOnefraction != _lineOnefraction;
return false;
}
}
When I stroked it, the shape came out perfectly, and when I filled it to fill the color, it came out in a very strange shape.
PaintingStyle.fill
PaintingStyle.stroke
What`s the problem and how to solve this?
I assume you want to draw an object with the shape of the 'stroke' version, but filled like the 'fill' version. The problem is that calling moveTo breaks your current path and starts a new one at the coordinates you specify. Even if you draw your separate paths back together so that they look like they touch, as far as the engine is concerned they are not contiguous. Therefore, when you use PaintingStyle.fill it has no idea that it should fill that space in. The result in your example is that it closed the path of each bezier separately, and filled each bezier separately.
You can refactor to remove the moveTo calls, e.g.:
path.moveTo(size.width * 0.1, size.height * 0.34);
path.quadraticBezierTo(size.width * 0.1, size.height * 0.26,
size.width * 0.3, size.height * 0.28);
path.quadraticBezierTo(size.width * 0.5, size.height * 0.26,
size.width * 0.5, size.height * 0.34);
path.lineTo(size.width * 0.5, size.height * 0.34);
How do I apply a ClipPath to a BottomBar or a BottomNavigationBar in Flutter? I am trying to clip around the fourth tab in BottomBar(The clipped path should always be around fourth element). This is what I have so far:
#override
getClip(Size size) {
Path path = Path();
path.lineTo(0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0);
path.lineTo(size.width * 0.79, 0);
path.quadraticBezierTo(size.width*0.77, 0, size.width*0.77, size.height*0.2);
path.cubicTo(size.width * 0.77, size.height*1.2, size.width * 0.61, size.height*1.2,
size.width * 0.61, size.height*0.2);
path.quadraticBezierTo(size.width*0.61, 0, size.width*0.60,0);
path.lineTo(size.width * 0.59, 0);
return path;
}
#override
bool shouldReclip(CustomClipper oldClipper) {
return false;
}
}
WHAT I WANT:
The fourth element needs to be within the Center of the ClipPath for all screen sizes within a Stack.
Thanks!
I need to implement below like effect on top of image slider, please guide me
You can create custom ClipPath
class Clipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
Path path = Path();
path.lineTo(0, size.height);
path.quadraticBezierTo(
size.width / 4, size.height - 40, size.width / 2, size.height - 20);
path.quadraticBezierTo(
3 / 4 * size.width, size.height, size.width, size.height - 30);
path.lineTo(size.width, 0);
return path;
}
#override
bool shouldReclip(Clipper oldClipper) => false;
}
find sample snippet
Note : this is basic idea you to have modify by your own requirement
sample output