Canvas tutorial 04 | How to draw a pie chart and with a round angle in the flutter?

<p>fore tutorial, we can easy to get the points of the small circles.</p> <p>radians = List(); markup--strong markup--pre-strongfont-weight: 700;](for (double d markup--strong markup--pre-strongfont-weight: 700;](in sources) { double radian = d * 2 * pi / total; radians.add(radian); } sources, List colors, double startAngle = 0.0, double paintWidth = 10.0, bool hasEnd = markup--strong markup--pre-strongfont-weight: 700;](false, hasCurrent = markup--strong markup--pre-strongfont-weight: 700;](false, int curIndex = 0, curPaintWidth = 12.0}) { markup--strong markup--pre-strongfont-weight: 700;](assert(sources != markup--strong markup--pre-strongfont-weight: 700;](null && sources.length > 0); markup--strong markup--pre-strongfont-weight: 700;](assert(colors != markup--strong markup--pre-strongfont-weight: 700;](null && colors.length > 0); markup--strong markup--pre-strongfont-weight: 700;](var paint = Paint() ..style = PaintingStyle.fill ..color = BLUE_NORMAL ..strokeWidth = paintWidth ..isAntiAlias = markup--strong markup--pre-strongfont-weight: 700;](true; double total = 0; markup--strong markup--pre-strongfont-weight: 700;](for (double d markup--strong markup--pre-strongfont-weight: 700;](in sources) { total += d; } markup--strong markup--pre-strongfont-weight: 700;](assert(total > 0.0); List radians = List(); markup--strong markup--pre-strongfont-weight: 700;](for (double d markup--strong markup--pre-strongfont-weight: 700;](in sources) { double radian = d * 2 * pi / total; radians.add(radian); } markup--strong markup--pre-strongfont-weight: 700;](var startA = startAngle; <a href=>http://paint.style</a><a href="paint.style">http://paint.style</a> = PaintingStyle.stroke; markup--strong markup--pre-strongfont-weight: 700;](var curStartAngle = 0.0; markup--strong markup--pre-strongfont-weight: 700;](for (int i = 0; i 1.0 && size.height > 1.0) { print(">1.9"); _sizeUtil.logicSize = size; } markup--strong markup--pre-strongfont-weight: 700;](var paint = Paint() ..style = PaintingStyle.fill ..color = BLUE_NORMAL ..strokeWidth = 2.0 ..isAntiAlias = markup--strong markup--pre-strongfont-weight: 700;](true; paint.color = Colors.<em>markup--em markup--pre-emfont-feature-settings: "liga", "salt";](grey</em>[900]; // canvas.drawCircle( // Offset(_sizeUtil.getAxisX(250), _sizeUtil.getAxisY(250.0)), // _sizeUtil.getAxisBoth(200.0), // paint); paint.color = RED_DARK1; paint.strokeWidth = 20; <a href=>http://paint.style</a><a href="paint.style">http://paint.style</a> = PaintingStyle.stroke; markup--strong markup--pre-strongfont-weight: 700;](var center = Offset( _sizeUtil.getAxisX(250.0), _sizeUtil.getAxisY(250.0), ); markup--strong markup--pre-strongfont-weight: 700;](var radius = _sizeUtil.getAxisBoth(200); _drawArcGroup( canvas, center: center, radius: radius, sources: [1, 2, 1, 2, 1, 2, 1, 2, 1, 2], colors: [BLUE_DARK1, RED_DARK1, BLUE_DARK2, GREEN_NORMAL, YELLOW_NORMAL], paintWidth: 50.0, startAngle: 0.0, hasEnd: markup--strong markup--pre-strongfont-weight: 700;](true, hasCurrent: markup--strong markup--pre-strongfont-weight: 700;](false, curPaintWidth: 30.0, curIndex: 1, ); canvas.save(); canvas.restore(); }<p name="b978id="b978graf graf--p graf-after--figuremargin: 38px 0px 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em; color: rgba(0, 0, 0, 0.84);](The other param is for your research. Such as modifying its scale.</p> <p><h3 name="71eaid="71eagraf graf--h3 graf-after--pfont-family: medium-content-sans-serif-font, "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Arial, sans-serif; letter-spacing: -0.015em; font-weight: 600; margin: 56px 0px 0px; color: rgba(0, 0, 0, 0.84); --baseline-multiplier:0.22; font-size: 34px; line-height: 1.15;](Conclusion<p name="84e8id="84e8graf graf--p graf-after--h3margin: 8px 0px 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em; color: rgba(0, 0, 0, 0.84);](In this tutorial, we can draw the pie chart in the flutter.</p> <p>postListmargin: 29px 0px 0px; padding: 0px; list-style: none none; counter-reset: post 0; color: rgba(0, 0, 0, 0.84); font-family: medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif; font-size: 20px;](<li name="3551id="3551graf graf--li graf-after--pmargin-left: 30px; margin-bottom: 14px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em;](The principle of the arc with a round angle.<li name="cc33id="cc33graf graf--li graf-after--limargin-left: 30px; margin-bottom: 14px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em;](Draw the arc and two circles.<li name="867fid="867fgraf graf--li graf-after--limargin-left: 30px; margin-bottom: 14px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em;](Define a function to draw a pie chart.<li name="def1id="def1graf graf--li graf-after--limargin-left: 30px; margin-bottom: 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em;](Use the pie chart with the different values of the params.<p name="b2dfid="b2dfgraf graf--p graf-after--limargin: 29px 0px 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em; color: rgba(0, 0, 0, 0.84);](The whole project, if you like, thanks for a star in the GitHub: [https://github.com/FlutterOpen/flutter-canvasdata-href="<a href=> https:="github.com="flutteropen="flutter-canvas"="</a><a href="https://github.com/FlutterOpen/flutter-canvas">https://github.com/FlutterOpen/flutter-canvas</a></p> <p><p name="817fid="817fgraf graf--p graf-after--pmargin: 29px 0px 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em; color: rgba(0, 0, 0, 0.84);](The End</p> <p><p name="32d5id="32d5graf graf--p graf-after--pmargin: 29px 0px 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em; color: rgba(0, 0, 0, 0.84);](Developer: [https://github.com/nb312data-href="<a href=> https:="github.com="nb312"="</a><a href="https://github.com/nb312">https://github.com/nb312</a></p> <p><p name="cc81id="cc81graf graf--p graf-after--pmargin: 29px 0px 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em; color: rgba(0, 0, 0, 0.84);](facebook page: [https://www.facebook.com/flutteropendata-href="<a href=""> https:="www.facebook.com="flutteropen"="</a><a href="https://www.facebook.com/flutteropen">https://www.facebook.com/flutteropen</a></p> <p><p name="690aid="690agraf graf--p graf-after--p graf--trailingmargin: 29px 0px 0px; --baseline-multiplier:0.17; font-family: medium-content-serif-font, Georgia, Cambria, "Times New Roman", Times, serif; font-size: 21px; line-height: 1.58; letter-spacing: -0.003em; color: rgba(0, 0, 0, 0.84);](Thanks for your reading, you can follow the Flutter Open.</p>