Hello everybody need your help, I'm loading svg images into flutter with the svg_path_parser library, but I want to change the color of each path when touch it, right now I can change the color of all paths, but I need to know which path was selected and change the color of this path, somebody can help me or tell me how can I do this.. Thanks
I have this (flutter logo)..
final paths = [
['m48.75 95.97-25.91-25.74 14.32-14.57 40.39 40.31z', Color(0xff02539a)],
['m22.52 70.25 25.68-25.68h28.87l-39.95 39.95z', Color(0xd745d1fd)],
['m.29 47.85 14.58 14.57 62.2-62.2h-29.02z', Color(0xff45d1fd)]
];
class _MyHomePageState extends State<MyHomePage> {
Color colorSelect = Colors.teal;
bool showBorder = false;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Transform.scale(
scale: 2.0,
child: GestureDetector(
child: Center(
child: Container(
width: 100,
height: 100,
child: Stack(
children: widget.paths.map((e) {
return CustomPaint(
painter: MyPainter(
parseSvgPath(e[0] as String), colorSelect,
showPath: showBorder));
}).toList(),
),
),
),
behavior: HitTestBehavior.translucent,
onTap: () {
setState(() {
// hide/show border
showBorder = !showBorder;
colorSelect = Colors.redAccent;
});
},
),
),
);
}
}
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) {
var border = Paint()
..color = Colors.black
..strokeWidth = 1.0
..style = PaintingStyle.stroke;
canvas.drawPath(path, border);
}
}