How to Create a Semi-Circle ProgressBar from 0 to 1000 in FlutterFlow?

Widgets & Design

I’m trying to create a ProgressBar that behaves like a semi-circle, going from 0 to 1000, similar to a score meter. When the score reaches 1000, it should fill 50% of the circle, creating a semi-circular arc. In FlutterFlow, I’ve set the Start Angle to 180°, but I couldn’t find an option to define an End Angle for the semi-circle.

I would like to know how I can adjust this configuration to create this semi-circle effect, where the progress goes up to 1000 and fills half of the circle.

Question: Does anyone know how to configure FlutterFlow to create a semi-circle ProgressBar from 0 to 1000, or is there any workaround to limit the progress so it reaches half the circle?

What have you tried so far?
  • I used the ProgressBar widget with the Circular shape.

  • Set the Start Angle to 180° to start the progress from the left side of the circle.

  • Adjusted the Progress Value based on the score, for example, 445 / 1000 = 0.445.

  • However, I couldn’t get the circle to fill up to 1000 with a complete semi-circle because there’s no End Angle option to limit the progress to a semi-circle.

Did you check FlutterFlow's Documentation for this topic?
Yes
2
1 reply