Как создать многоцветный Progress Bar с Flutter

Question

Как я могу создать многоцветный индикатор прогресса во флаттере. Я читал о LinearProgressIndicator, но я не уверен, что этого будет достаточно.

Я хочу сделать что-то подобное.

Пожалуйста, укажите мне, какой виджет использовать. Я не хочу полный код.

Answer 1

Вам придется собирать его по частям. Я вижу пять частей в индикаторе выполнения, который вы показываете:

1. Серый прямоугольник с эффектом тени / глубины, изогнутые углы
2. Зеленый прямоугольник с белым текстом (читай: Контейнер с рамкой)
3. Янтарный прямоугольник с белым текстом
4. Красный прямоугольник с белым текстом
5. Все прямоугольники расположены горизонтально (читай: строка)

Числа будут меняться по мере продвижения вашего мероприятия. Теперь это может быть достигнуто с помощью setState (). Итак, давайте не будем об этом беспокоиться. :)

Хорошо, пока Вам нужно подготовить класс, который принимает один параметр, и это progressPercentage. Основываясь на процентах, вы решаете, сколько блоков показывать и с каким текстом. Этот простой фрагмент кода dr aws зеленый прямоугольник с текстом на нем. И этот кодовый блок показывает многоцветную полосу, которую довольно легко преобразовать в индикатор выполнения.