If you want to draw a custom shape in flutter? A solution is to implement a custom painter (CustomPainter) then use the arcTo method to draw each part of the wheel.
Here is full working example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | import 'dart:math'; import 'package:flutter/material.dart'; class Home extends StatefulWidget { @override State<StatefulWidget> createState() { return _HomeState(); } } class WheelPainter extends CustomPainter { Path getWheelPath(double wheelSize, double fromRadius, double toRadius) { return new Path() ..moveTo(wheelSize, wheelSize) ..arcTo(Rect.fromCircle(radius: wheelSize, center: Offset(wheelSize, wheelSize)), fromRadius, toRadius, false) ..close(); } Paint getColoredPaint(Color color) { Paint paint = Paint(); paint.color = color; return paint; } @override void paint(Canvas canvas, Size size) { double wheelSize = 100; double nbElem = 6; double radius = (2 * pi) / nbElem; canvas.drawPath(getWheelPath(wheelSize, 0, radius), getColoredPaint(Colors.red)); canvas.drawPath(getWheelPath(wheelSize, radius, radius), getColoredPaint(Colors.purple)); canvas.drawPath(getWheelPath(wheelSize, radius * 2, radius), getColoredPaint(Colors.blue)); canvas.drawPath(getWheelPath(wheelSize, radius * 3, radius), getColoredPaint(Colors.green)); canvas.drawPath(getWheelPath(wheelSize, radius * 4, radius), getColoredPaint(Colors.yellow)); canvas.drawPath(getWheelPath(wheelSize, radius * 5, radius), getColoredPaint(Colors.orange)); } @override bool shouldRepaint(CustomPainter oldDelegate) { return oldDelegate != this; } } class _HomeState extends State<Home> { Widget build(BuildContext context) { return new Scaffold( appBar: AppBar( title: Text('Wheel test'), leading: new Icon(Icons.insert_emoticon), ), backgroundColor: Colors.white, body: CustomPaint( child: Container( height: 300.0, ), painter: WheelPainter(), ), ); //])); } } |
Output will look like:
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.
