I bet you all had situations when a designer made a cool-looking UI and you just thought “cool, but how to implement this”. The same happened to me when a saw this progress bar in Figma. Good thing is that in Flutter it’s pretty easy to create custom views and they will look awesome on every platform, but sometimes you just need to remember all these things that you have learned in geometric, and math classes. Yeah, we don’t always change the button’s color as someone thinks :) Let’s think what we have to make to implement the progress bar. Firstly, we have to find out a way to understand how many dots should be on the half-circle. Secondly, how to place these dots on it. Let’s  start simple, what if we have a straight line and we need to calculate  how many points it can fit. The answer is that you take the length of  the line, divide it by the diameter of the dot and add padding between them. And that’s done. We do the same, but with a circle. If you know the radius of the circle, we can find its length. The formula is 2 * pi * r, but we need only half of it, so for us, the formula will be: Finally, we know the size (radius or diameter) of the dots and the spacing between them, so we can simply divide the line’s length by the size of the dots with spacing. The formula will be: We use floor because we can’t draw, say, half of the dot. If we had a line, that would be easy to place the dots on it. We will start from 0 and add dotDiameter + dotsSpacing after the dots have been drawn. Unfortunately,  in our case, we can’t do it like that. To place dots on the circle we  will use Polar Coordinates and will specify two coordinates: how far away is the dot from the circle’s center (r), dot’s angle (θ). Having these coordinated we can easily convert them to Cartesian coordinates and draw afterward. The formulas are: We have everything to start implementing the progress bar. We will use a CustomPainter class to draw the view on the canvas. Let’s add all arguments that we need and implement methods the CustomPainter requires, but the paint method. There  we have arguments to customize the progress bar, like the dot’s colors, spacing between dots and layers, and radius of the first (inner) circle. Also, we create the painters, so we won’t instantiate them every time in the painting method. Don’t forget to implement shouldRepaint method, so the view gets repainted once one of the arguments is changed. Let’s implement the paint method that draws a circle with dots. Here we get the center of the circle, calculating how many dots will be on the circle and the angle between them. The important thing here is that we start drawing the dots from 270 angles (_startAngle) because we want the first dot to be in the bottom left corner and moving clockwise. Also, have a look at how we calculate how many dots should have different (progress) colors. The last thing is to add more layers. A for-loop has been added and for every tick, we just increase the circle’s radius by adding the dot’s diameter and spacing between layers. You can use your CustomPainter by wrapping it with the CustomPaint widget, but I think that is not user-friendly. So let’s wrap the painter with our widget. Here  is the widget that encapsulates some things about the painter and adds  default values for the required arguments. The important thing here is  that we add size for the CustomPaint so that Painter knows the size of the canvas and the widget can be correctly positioned, for example, in a Stack widget. Also, ClipRect  is added to cut everything that is out of the parent widget. That happens when a parent widget is smaller than the size needed to draw the  progress bar. Here is the link to the repository — https://github.com/ValeryPonomarenko/flutter-half-circle-progress-bar  Mobile Developer