How to create a multicolor Progress Bar with Flutter

Question

How can i create a multicolor Progress Bar in Flutter. I read about the LinearProgressIndicator but i am not sure it will suffice.

I want to do something like this.

Please guide me on what widget to use. I do not want full code.

Answer 1

You'll have to assemble it part by part. I see five parts in the progress bar you show:

1. A grey rectangle with a shadow/depth effect, curved corners
2. Green rectangle with white text (read: Container with border)
3. Amber rectangle with white text
4. Red rectangle with white text
5. All the rectangles are horizontally (read: Row)

The numbers will be changing as your event(s) are progressing. Now, this can be achieved with setState(). So, lets' not worry about that. :)

Okay, as far the You need to prepare a class which takes one parameter and that's the progressPercentage . Based on the percentage, you decide how many blocks to show and with what text. This simple code snippet draws green rectangle with some text on it. And this codepen shows multi color bar which might be fairly easy to convert into the progressbar.