In my pursuit of making an IOS version for my downloader for Instagram app in Flutter, I wanted to incorporate the above design for showing download progress on photos and videos. If anyone else is looking for a similar design, then, this is how I did it.
Here’s the code first if you want only a quick copy. For explanation scroll down.
For the circle shape we will use a Container Widget. We will throw in a little padding first to create that neat space around the progress bar edges. Then we use the BoxDecoration widget to define the shape and the color of the shape.
Now in the child of the Container widget, we use the Stack widget to position our text and progress bar.
For those who are unaware, Stack widget is similar to the RelativeLayout where you can position its children relative to each other.
If you look at the design, what we want is the text to be centered in the circle shape and the circular progress bar to expand till the edge of the circle shape. We can do it my adding the Alignment.center parameter to the Stack widget, this will center the Text widget but it will center the CircularProgressIndicator widget. Since we want to expand till the edges we will wrap it with the Positioned.fill widget.
That’s it. You have your filled track style circular progress bar. Customize it to your needs. Happy Coding✌️.
