I have a use case in which I've to draw a rectangle using the 4 coordinates. I don't want to use drawLine() as later I need a GestureDetector on the rectangle. How can I draw using drawRect()?
canvas.drawLine(
new Offset(rectLeft, rectBottom - lineWidth / 2),
new Offset(rectRight, rectBottom - lineWidth / 2),
rectPaint
); // bottom
canvas.drawLine(
new Offset(rectLeft, rectTop + lineWidth / 2),
new Offset(rectRight, rectTop + lineWidth / 2),
rectPaint
); // top
canvas.drawLine(
new Offset(rectLeft + lineWidth / 2, rectBottom),
new Offset(rectLeft + lineWidth / 2, rectTop),
rectPaint
); //left
canvas.drawLine(
new Offset(rectRight - lineWidth / 2, rectBottom),
new Offset(rectRight - lineWidth / 2, rectTop),
rectPaint
); //right
You need to create a CustomPainter
class YourRect extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
canvas.drawRect(
new Rect.fromLTRB(0.0, 0.0, 50.0, 50.0),
new Paint()..color = new Color(0xFF0099FF),
);
}
#override
bool shouldRepaint(YourRect oldDelegate) {
return false;
}
}
then use it like this:
new GestureDetector(
onTap: () {
debugPrint("hello");
},
child: Container(
width: 50,
height: 50,
child: CustomPaint(
painter: (YourdrawRect()),
),
),
),
You can simply use create a polygon and use drawPath() function of the canvas
canvas.drawPath(
Path()..addPolygon([
Offset(0, 0),
Offset(10, 0),
Offset(10, 10),
Offset(0, 10),
], true),
paint);
Related
In Flutter I try to make a segmented ring (or radial gauge) around a number to indicate its value. Like here
The example of in the link is already a solution itself, however, I read syncfusion widgets are not free. (I am using it commercially)
Any alternatives or ideas how to set this into practice?
You can use CustomPainter to achieve the same,
class RingPainter extends CustomPainter {
const RingPainter({
required this.percentage,
this.startColor,
this.endColor,
this.width,
}) : assert(percentage >= 0 && percentage <= 100,
"Percentage must be in the range 0-100!");
final double percentage;
final Color? startColor;
final Color? endColor;
final double? width;
double get progress => percentage / 100;
#override
void paint(Canvas canvas, Size size) {
var angle = math.pi / 180 * 230;
canvas.rotateAroundCenter(size, angle);
canvas.drawRing(
size,
1,
startColor: Colors.black12,
endColor: Colors.black12,
width: width,
);
canvas.drawRing(
size,
progress,
startColor: startColor,
endColor: endColor,
width: width,
);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
extension on Canvas {
rotateAroundCenter(Size size, double angleInRadians) {
final double r =
math.sqrt(size.width * size.width + size.height * size.height) / 2;
final alpha = math.atan(size.height / size.width);
final beta = alpha + angleInRadians;
final shiftY = r * math.sin(beta);
final shiftX = r * math.cos(beta);
final translateX = size.width / 2 - shiftX;
final translateY = size.height / 2 - shiftY;
translate(translateX, translateY);
rotate(angleInRadians);
}
drawRing(
Size size,
double value, {
Color? startColor,
Color? endColor,
double? width,
}) {
final rect = Rect.fromLTWH(-15, 0.0, size.width, size.height);
final gradient = SweepGradient(
startAngle: 3 * math.pi / 2,
endAngle: 7 * math.pi / 2,
tileMode: TileMode.repeated,
colors: [
startColor ?? Colors.pink,
endColor ?? Colors.blueAccent,
],
);
final paint = Paint()
..shader = gradient.createShader(rect)
..strokeCap = StrokeCap.round
..style = PaintingStyle.stroke
..strokeWidth = width ?? 24;
final center = Offset(size.width / 2, size.height / 2);
final radius =
math.min(size.width / 2, size.height / 2) - ((width ?? 24) / 2);
const startAngle = -math.pi / 2;
final sweepAngle = 2 * math.pi * value * 0.723;
drawArc(
Rect.fromCircle(center: center, radius: radius),
startAngle,
sweepAngle,
false,
paint,
);
}
}
Use it with CustomPaint widget,
CustomPaint(
painter: RingPainter(
percentage: 70,
width: 20,
),
)
In case, you want text inside ring,
Center(
child: SizedBox(
width: 200,
height: 200,
child: Stack(
fit: StackFit.expand,
children: [
const Center(
child: Text(
"70%",
style: TextStyle(
fontSize: 48,
fontWeight: FontWeight.w900,
color: Colors.purple,
),
),
),
CustomPaint(
painter: RingPainter(
percentage: 70,
width: 20,
),
),
],
),
),
)
i have the simple following code
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
width: 300,
height: 100,
decoration: const BoxDecoration(
color: Colors.black,
borderRadius: BorderRadius.only(topRight: Radius.circular(30.0),topLeft: Radius.circular(30.0),)
),
),
),
);
}
the outputs looks like following
but i am trying to reverse it to be like following (sorry for the bad drawing)
How could i achieve this with simple way ? best regards :)
This can be done with a CustomPainter:
class InvertedRoundedRectanglePainter extends CustomPainter {
InvertedRoundedRectanglePainter({
required this.radius,
required this.color,
});
final double radius;
final Color color;
#override
void paint(Canvas canvas, Size size) {
final cornerSize = Size.square(radius * 2);
canvas.drawPath(
Path()
..addArc(
// top-left arc
Offset(0, -radius) & cornerSize,
// 180 degree startAngle (left of circle)
pi,
// -90 degree sweepAngle (counter-clockwise to the bottom)
-pi / 2,
)
..arcTo(
// top-right arc
Offset(size.width - cornerSize.width, -radius) & cornerSize,
// 90 degree startAngle (bottom of circle)
pi / 2,
// -90 degree sweepAngle (counter-clockwise to the right)
-pi / 2,
false,
)
// bottom right of painter
..lineTo(size.width, size.height)
// bottom left of painter
..lineTo(0, size.height),
Paint()..color = color,
);
}
#override
bool shouldRepaint(InvertedRoundedRectanglePainter oldDelegate) =>
oldDelegate.radius != radius || oldDelegate.color != color;
}
You can play with this example on DartPad: https://dartpad.dartlang.org/?id=18cfbcc696b43c7c002a5ac3c94dd520
I am trying to achieve a circular widget in which each slice represents a tab and having a separation line between each slice coming out from the centre of the circle as shown in the image.
I have tried bunch of packages and I found the following package fulfilling the purpose to some extent. https://pub.dev/packages/circular_widgets
I have also tried with Clipping and Custom painting API, but couldn't achieve what i am looking for.
I made custom painter with widgets
I hope this help you
class CircleCustomPainer extends CustomPainter {
var count = 6;
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint();
paint.color = Colors.red;
Paint paint1 = Paint();
paint1.color = Colors.white;
paint1.strokeWidth = 4;
paint1.style = PaintingStyle.stroke;
canvas.drawCircle(
Offset(size.width / 2, size.height / 2), size.height / 2, paint);
Path path = Path();
path.moveTo(size.width / 2, size.height / 2);
for (var i = 0; i < count; i++) {
var o = (2 * i * math.pi) / count;
var x = 150 * math.cos(o) + (size.width / 2);
var y = 150 * math.sin(o) + (size.height / 2);
path.lineTo(x, y);
path.moveTo(size.width / 2, size.height / 2);
}
canvas.drawPath(path, paint1);
}
#override
bool shouldRepaint(covariant CustomPainter oldDelegate) => true;
}
this is widget creator for menu
Widget getWidgets(int count, Size size) {
List<Widget> list = [];
for (var i = 0; i < count; i++) {
var o = (2 * i * math.pi) / count;
o = o + ((360 / count) / 57.2958) / 2;
var x = (size.width / 3) * math.cos(o) + (size.width / 2);
var y = (size.width / 3) * math.sin(o) + (size.height / 2);
list.add(Positioned.fromRect(
rect: Rect.fromCenter(center: Offset(x, y), height: 60, width: 60),
child: Column(
children: [
Container(
color: Colors.black,
width: 60,
height: 60,
),
],
),
));
}
return Container(
width: 300,
height: 300,
alignment: Alignment.center,
child: Stack(
children: list,
),
);
}
you can used like this
SizedBox(
width: 300,
height: 300,
child: Stack(
alignment: Alignment.center,
children: [
CustomPaint(
size: Size(300, 300),
painter: CircleCustomPainer(),
),
Center(child: getWidgets(6, Size(300, 300)))
],
),
)
I will probably create a youtube video for that
I would like to operate some perspective on a ClipPath overlay with Flutter.
I reproduced inverted Clip Oval from Flutter: inverted ClipOval which works fine.
Then i would like to operate a perspective on this overlay:
For now i use a Transform widget but the "grey background" gets also rotated.I would like the background to expand on all screen left.
I think i should rotate only in InvertedRectClipper but i can't find a way to do something similar as alignment: FractionalOffset.center which tell where is the origin to rotate on.
Anyone have a tips for this ?
Actual screenshot :
Background is not entirely grey
Full code to test :
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: SafeArea(
child: Stack(
children: <Widget>[
Container(
color: Colors.white,
),
Transform(
alignment: FractionalOffset.center,
transform: Matrix4.identity()
..setEntry(3, 2, 0.0005) // perspective
..rotateX(-0.9),
child: ClipPath(
clipper: InvertedRectClipper(),
child: Container(
color: Color.fromRGBO(0, 0, 0, 0.5),
),
),
)
],
),
),
));
}
class InvertedRectClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
return Path()
..addRect(Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: size.width / 2,
height: size.height / 2))
..addRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height))
..fillType = PathFillType.evenOdd;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
The key is to only transform the path you need to transform, not the whole widget.
Here is a sample :
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: SafeArea(
child: Stack(
children: <Widget>[
Container(
color: Colors.blue,
),
ClipPath(
clipper: InvertedRectClipper(),
child: Container(
color: Colors.black.withOpacity(0.5),
),
)
],
),
),
));
}
class InvertedRectClipper extends CustomClipper<Path> {
#override
Path getClip(Size size) {
// First rectangle, to be transformed
var path = Path()
..fillType = PathFillType.evenOdd
..addRect(Rect.fromCenter(
center: Offset(size.width / 2, size.height / 2),
width: size.width / 2,
height: size.height / 2));
// Transform matrix
final matrix = Matrix4.identity()
..setEntry(3, 2, 0.0005)
..rotateX(-0.9);
path = path.transform(matrix.storage);
// Outer rectangle, straight
path.addRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height));
// Return path
return path;
}
#override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
Here is the result
You'll 'just' have to adapt the transformation to your convenance.
** EDIT **
If you need the transformation to be centered relative to your rectangle, an easy way is to draw the rectangle centered on the origin, apply the transformation, then translate it to be centered to the screen :
Path getClip(Size size) {
// First rectangle, to be transformed, centered at the origin
var path = Path()
..fillType = PathFillType.evenOdd
..addRect(Rect.fromCenter(
center: Offset(0, 0),
width: size.width / 2,
height: size.height / 2));
// Rotation X
final matrix = Matrix4.identity()
..setEntry(3, 2, 0.001)
..rotateX(-0.9);
path = path.transform(matrix.storage);
// Translation to center back the rectangle
path = path.transform(Matrix4.translationValues(size.width / 2, size.height / 2, 0).storage);
// Outer rectangle, straight
path.addRect(Rect.fromLTWH(0.0, 0.0, size.width, size.height));
// Return path
return path;
}
I want to build an application where for one of my designs I would like to populate shapes with dynamic data. These will be custom shapes where I have two different shapes and they alternate one below the other. So I have a left shape and then the next one will be a right shape and so on. Is is possible to create this in Flutter and how would I do it?
Here is one way of doing it. I have simplify the shape with my custom triangle shape created with CustomPainter so you will have to modify it to your needs.
ListView(
children: <Widget>[
OverflowTitle(color: Colors.green),
OverflowTitle(color: Colors.blue),
OverflowTitle(color: Colors.red)
],
);
and custom overflow title
class OverflowTitle extends StatelessWidget {
final Color color;
const OverflowTitle({this.color});
#override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: 50,
child: OverflowBox(
alignment: Alignment.bottomCenter,
minHeight: 50,
maxHeight: 70,
child: Container(
height: 60,
child: CustomPaint(
painter: TrianglePainter(
strokeColor: color,
),
child: Text(
'NO1',
textAlign: TextAlign.center,
),
),
),
),
);
}
}
Here is output
Let me know if you need more help with it...
UPDATE
here is my custom triangle painter
import 'package:flutter/material.dart';
enum Direction { Up, Down, Left, Right }
class TrianglePainter extends CustomPainter {
final Color strokeColor;
final Direction direction;
TrianglePainter({this.strokeColor = Colors.white, this.direction});
#override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = strokeColor
..style = PaintingStyle.fill;
canvas.drawPath(getTrianglePath(size.width, size.height), paint);
}
Path getTrianglePath(double x, double y) {
if (direction == Direction.Right) {
return Path()
..moveTo(0, y)
..lineTo(x, y / 2)
..lineTo(0, 0)
..lineTo(0, y);
} else if (direction == Direction.Left) {
return Path()
..moveTo(x, 0)
..lineTo(0, y / 2)
..lineTo(x, y)
..lineTo(x, 0);
} else if (direction == Direction.Down) {
return Path()
..moveTo(0, 0)
..lineTo(x / 2, y)
..lineTo(x, 0)
..lineTo(0, 0);
} else {
return Path()
..moveTo(0, y)
..lineTo(x / 2, 0)
..lineTo(x, y)
..lineTo(0, y);
}
}
#override
bool shouldRepaint(TrianglePainter oldDelegate) {
return oldDelegate.strokeColor != strokeColor;
}
}