'painting house using custom paint
I have an svg image with its path and i wanna create a listener and paint on a specific path which i have clicked or selected it.
Color _fillColor = Colors.cyan;
final paths = [
["m829.35 691.34.96 21.77h-33.58l-1.01-23z", const Color(0xffacd266), "green1"],
[
"m829.35 691.34-33.63-1.23 4.15-2.05 34.26 1.03 1.37 22.38-5.19 1.64z",
const Color(0xffacd266),
"green2"
],
[
'm818.5 506v7l-20.53.49 16.34-1.82s-.41-8.7 0-8.29 4.19 2.62 4.19 2.62z',
const Color(0xfffff),
"white1"
],
[
'm810.96 497.49-39.34-25.66v-2.25l47.98 31.72.13 1.92-5.82-3.81-1.55 7.79z',
const Color(0xffed1e29),
"red1"
],
[
"m810.53 462.36.91 16.29-4.37-2.75-.58-12.26z",
const Color(0xffacd266),
"green3"
],
["m810.01 500.25v9.52l-22.5 1.84-.7-10.22z", const Color(0xfffff), "white2"],
["m810.01 500.25-23.2 1.14-1.13-16.46z", const Color(0xfffff), "white3"],
];
class _ImageFiller2State extends State<ImageFiller2> {
bool showBorder = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
TextButton(
onPressed: () {
setState(() {
_fillColor = Colors.brown;
});
},
child: const Text(
"Brown",
style: TextStyle(color: Colors.black),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.brown)),
),
TextButton(
onPressed: () {
setState(() {
_fillColor = Colors.amber;
});
},
child: const Text(
"Amber",
style: TextStyle(color: Colors.black),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.amber)),
),
TextButton(
onPressed: () {
setState(() {
_fillColor = Colors.cyan;
});
},
child: const Text(
"Cyan",
style: const TextStyle(color: Colors.black),
),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.cyan)),
),
Padding(
padding: const EdgeInsets.only(top: 200),
child: SizedBox(
height: 50,
width: 50,
child: Transform.scale(
scale:0.4,
child: GestureDetector(
child: Center(
child: Stack(
children: widget.paths.map((e) {
return CustomPaint(
painter: MyPainter(
parseSvgPath(e[0].toString()), e[1] as Color,
showPath: showBorder
)
);
}).toList(),
),
),
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
// hide/show border
showBorder = !showBorder;
});
},
),
),
),
),
],
),
);
}
}
class MyPainter extends CustomPainter {
final Path path;
final Color color;
final bool showPath;
MyPainter(this.path, this.color, {this.showPath = true});
@override
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = color
..strokeWidth = 4.0;
canvas.drawPath(path, paint);
if (showPath && color==const Color(0xffacd266)) {
var border = Paint()
..color = _fillColor
..strokeWidth = 1.0
..style = PaintingStyle.fill;
canvas.drawPath(path, border);
}
if (showPath && color==const Color(0xfffff)) {
var border = Paint()
..color = Colors.pink
..strokeWidth = 1.0
..style = PaintingStyle.fill;
canvas.drawPath(path, border);
}
if (showPath && color==const Color(0xffed1e29)) {
var border = Paint()
..color = Colors.lime
..strokeWidth = 1.0
..style = PaintingStyle.fill;
canvas.drawPath(path, border);
}
if (showPath && color==const Color(0xffc844)) {
var border = Paint()
..color = Colors.purple
..strokeWidth = 1.0
..style = PaintingStyle.fill;
canvas.drawPath(path, border);
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => true;
}
I am able to paint house but i wanna create a listener and when ever i tap on a certain section of house i can paint on certain part only
the above picture what i got and in the left top side you can see a red circle right now i am able to paint on the house only when i tap on that circle part need some help
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|