I am trying to create custom navigation drawer just like bottom navigation but in navigation drawer.I am not able to achieve the view we want.I tried using custom painter but i am not expert in it.Suggest some websites where i can learn custom painter basic to advance level.
My code :
class MyCustomPainter extends CustomPainter{
#override
void paint(Canvas canvas, Size size) {
Paint paint0 = Paint()
..color = const Color.fromARGB(255, 33, 150, 243)
..style = PaintingStyle.fill;
// ..strokeWidth = 1;
Path path0 = Path();
path0.moveTo(size.width*0.0025000,size.height*0.0042857);
path0.quadraticBezierTo(size.width*0.2481250,size.height*0.0010714,size.width*0.3300000,0);
path0.lineTo(size.width*0.3308333,size.height*0.1385714);
path0.quadraticBezierTo(size.width*0.1392500,size.height*0.1384000,size.width*0.1247083,size.height*0.2564000);
path0.quadraticBezierTo(size.width*0.1423583,size.height*0.3717143,size.width*0.3328917,size.height*0.3609143);
path0.lineTo(size.width*0.3328417,size.height*0.9951571);
path0.lineTo(size.width*0.0033333,size.height*0.9957143);
path0.quadraticBezierTo(size.width*0.0031250,size.height*0.7478571,size.width*0.0025000,size.height*0.0042857);
path0.close();
canvas.drawPath(path0, paint0);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Related
I search a lot how to apply frame on images but found no answer. I read stack function in which we can put an image inside other but its not good trick. I think there must be library for frame and by using that frame can automatically apply on border of image. Please guide me how can I use different design of frame outside image like some filters application.
I want to give options of frame to user like below and when user click on any frame that will apply on image
There are many approaches for that issue. I've used several in the past. It strongly differs in the way you want to make use of the image. Do you need to paint something on the image or just display it?
In my opinion multiple frames on an image can be achieved best with CustomPainter. Check out the documentation for more. The following Painter should do the trick.
class TestPainter extends CustomPainter {
final ui.Image image;
TestPainter({required this.image});
#override
void paint(Canvas canvas, Size size) {
//draw the image
canvas.drawImage(image, const Offset(0, 0), Paint());
double rectWidth = image.width.toDouble();
double rectHeight = image.height.toDouble();
final imageCenter = Offset(image.width / 2, image.height / 2);
//first frame
var border1 = Rect.fromCenter(
center: imageCenter,
width: rectWidth + 1,
height: rectHeight + 1);
var painting = Paint();
painting.color = Colors.red;
painting.strokeWidth = 2;
painting.style = PaintingStyle.stroke;
canvas.drawRect(border1, painting);
//second frame
var border2 = Rect.fromCenter(
center: imageCenter,
width: rectWidth + 3,
height: rectHeight + 3);
var painting2 = Paint();
painting2.color = Colors.green;
painting2.strokeWidth = 2;
painting2.style = PaintingStyle.stroke;
canvas.drawRect(
border2,
painting2,
);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
Please be cautious. The Image in that example needs to be an Image of the dart:ui library (Documentation). There are various way to convert. Depends on your project.
I need to make a shape as seen in the photo below with container in Flutter, can you help me for this?
use this code to create shape like this
import 'dart:ui' as ui;
//Add this CustomPaint widget to the Widget Tree
CustomPaint(
size: Size(WIDTH, (WIDTH*0.3542581280172481).toDouble()), //You can Replace [WIDTH] with your desired width for Custom Paint and height will be calculated automatically
painter: RPSCustomPainter(),
)
//Copy this CustomPainter code to the Bottom of the File
class RPSCustomPainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
Path path_0 = Path();
path_0.moveTo(size.width*1.156952,size.height*3.936736);
path_0.lineTo(size.width*1.968605,size.height*3.949394);
path_0.cubicTo(size.width*1.968605,size.height*3.949394,size.width*2.151398,size.height*4.204300,size.width*2.152460,size.height*4.443043);
path_0.cubicTo(size.width*2.153491,size.height*4.675744,size.width*1.977573,size.height*4.936736,size.width*1.977573,size.height*4.936736);
path_0.lineTo(size.width*1.152468,size.height*4.898765);
path_0.lineTo(size.width*1.156952,size.height*3.936736);
path_0.close();
Paint paint_0_fill = Paint()..style=PaintingStyle.fill;
paint_0_fill.color = Color.fromRGBO(216, 216, 216,1.0).withOpacity(1.0);
canvas.drawPath(path_0,paint_0_fill);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) {
return true;
}
}
I am drawing shapes using canvas and customPaint as shown in the image below.
And I'm going to drag each shape to rotate it.
I knew that I could rotate it through the canvas.rotate.
But if I use this, there's a problem with all the shapes rotating the same.
The following is part of my code.
class Shape {}
class Rectangle extends Shape {
Rect? rect;
double? left, top;
bool? isRectSelected;
final paint = Paint();
Rectangle(Color color, double width) {
this.paint
..color = color
..isAntiAlias = true
..strokeCap = StrokeCap.round
..strokeWidth = width
..style = PaintingStyle.stroke; // no fill
}
// ========================
class Sketcher extends CustomPainter {
final List<Shape> shapes;
Sketcher(
this.shapes,
) : super();
#override
void paint(Canvas canvas, Size size) {
for (var shape in shapes) {
if (shape is Rectangle) {
final degrees = 30; // angle
final radians = degrees * math.pi / 180;
// ! If use it, all shape rotate same angle
canvas.translate(shape.rect!.left, shape.rect!.top); // left top
canvas.rotate(radians);
canvas.translate(-shape.rect!.left, -shape.rect!.top);
// ractangle shape
canvas.drawRect(shape.rect!, shape.paint);
}
// same code circle...
}
}
How do I rotate each shape instead of the entire canvas?
Could you tell me how to do this?
You can use canvas.save() to save the state the canvas then adjust the canvas according to your need and then use canvas.restore() to restore the canvas to the state before save(). The action inside the save-restore action will still be draw to the canvas.
canvas.save();
// do something
// canvas.rotate(radians);
// canvas.drawRect(); // this rect will be rotated
canvas.restore();
canvas.drawRect(); // this rect will not be rotated
As shown in the picture below, I want it to be drawn smoothly like a signature depending on the drawing speed (touch pressure?).
What should I do for this?
There are some packages in Flutter Dev, but I'm going to add more functions than that, so I'm going to try to implement them myself if possible.
This is a code for a simple drawing that I've used.
final paint = Paint()
..color = color
..isAntiAlias = true
..style = PaintingStyle.stroke
..strokeCap = StrokeCap.round
..strokeJoin = StrokeJoin.round
..strokeWidth = width;
class Sketcher extends CustomPainter {
final List<Shape> shapes;
Sketcher(this.shapes) : super();
#override
void paint(Canvas canvas, Size size) {
canvas.drawPoints(PointMode.polygon, points, paint);
#override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
I want to implement this using a GestureDetector and CustomPaint.
Can I see an example about this?
I want to create widget using custom painter like following with touch gesture;
Draw svg of this image. Then convert into flutter paint code using
https://fluttershapemaker.com/
Add the touchable package as dependency in your pubspec.yaml
https://github.com/nateshmbhat/touchable
Example :
CanvasTouchDetector(
builder: (context) =>
CustomPaint(
painter: MyPainter(context)
)
)
class MyPainter extends CustomPainter {
final BuildContext context ;
MyPainter(this.context); // context from CanvasTouchDetector
#override
void paint(Canvas canvas, Size size) {
var myCanvas = TouchyCanvas(context,canvas);
myCanvas.drawCircle(Offset(10, 10), 60, Paint()..color=Colors.orange ,
onTapDown: (tapdetail) {
print("orange Circle touched");
},
onPanDown:(tapdetail){
print("orange circle swiped");
}
);
myCanvas.drawLine(
Offset(0, 0),
Offset(size.width - 100, size.height - 100),
Paint()
..color = Colors.black
..strokeWidth = 50,
onPanUpdate: (detail) {
print('Black line Swiped'); //do cooler things here. Probably change app state or animate
});
}
}