How do I draw a vector shape in Flutter?
4,675
You can create a widget that extends CustomPainter
class Sky extends CustomPainter { @override void paint(Canvas canvas, Size size) { var rect = Offset.zero & size; var gradient = new RadialGradient( center: const Alignment(0.7, -0.6), radius: 0.2, colors: [const Color(0xFFFFFF00), const Color(0xFF0099FF)], stops: [0.4, 1.0], ); canvas.drawRect( rect, new Paint()..shader = gradient.createShader(rect), ); } @override SemanticsBuilderCallback get semanticsBuilder { return (Size size) { // Annotate a rectangle containing the picture of the sun // with the label "Sun". When text to speech feature is enabled on the // device, a user will be able to locate the sun on this picture by // touch. var rect = Offset.zero & size; var width = size.shortestSide * 0.4; rect = const Alignment(0.8, -0.9).inscribe(new Size(width, width), rect); return [ new CustomPainterSemantics( rect: rect, properties: new SemanticsProperties( label: 'Sun', textDirection: TextDirection.ltr, ), ), ]; }; } // Since this Sky painter has no fields, it always paints // the same thing and semantics information is the same. // Therefore we return false here. If we had fields (set // from the constructor) then we would return true if any // of them differed from the same fields on the oldDelegate. @override bool shouldRepaint(Sky oldDelegate) => false; @override bool shouldRebuildSemantics(Sky oldDelegate) => false; }
See also
- https://pub.dartlang.org/packages/flutter_svg (limited SVG support for Flutter)
- https://github.com/flutter/flutter/tree/master/dev/tools/vitool
- https://github.com/simolus3/fluttie (not sure this is working already)
Author by
javad bat
love to design and develop web component and design interaction simple as it could be
Updated on December 04, 2022Comments
-
javad bat over 1 year
We are trying to build a custom shape vector in Flutter that can be changed at runtime.
For example, we need a pizza shape vector widget that we can change the slice color base on a variable value.
We tried to use the canvas and painter in Flutter but they don't have a clear and good doc.
We tried SVG too but unfortunately Flutter doesn't support SVG tag and SVG view too.