Шкала прогресса

Виджет ProgressBar используется для отображения хода выполнения любой задачи.

Вы можете использовать виджет ProgressBar для создания пользовательского интерфейса, который показывает загрузку/выгрузку файлов, продажи на этой неделе, потраченные часы, общий результат и т.д.

Вот как вы можете добавить виджет ProgressBar в свой проект:

1. Добавьте виджет ProgressBar, перетащив его с вкладки Base Elements или непосредственно из дерева виджетов, и выровняйте его по центру.
2. Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства Progress Bar«.
3. Найдите выпадающий список «Форма прогресс—бара» и установите круговую или линейную форму.
   • Круговая: ProgressBar отображается в форме круга. Это форма по умолчанию, установленная для ProgressBar.
   • Линейный: ProgressBar отображается в форме прямоугольника и располагается горизонтально на экране.
4. Чтобы установить прогресс, найдите поле ввода Progress Value и введите значение от 0 до 1,0. Например, значение 0,3 заполнит 30% части ProgressBar.
5. Чтобы изменить текст прогресса (отображается в центре), прокрутите вниз до раздела Text, найдите свойство Text и введите значение.

Панель свойств можно использовать для настройки внешнего вида и поведения кругового индикатора выполнения.

Вы можете захотеть изменить размер по умолчанию кругового ProgressBar, чтобы он соответствовал вашему дизайну. Это можно сделать с помощью свойства Diameter.

Чтобы изменить размер кругового прогресс-бара, выполните следующие действия:

• Выберите ProgressBar в дереве виджетов или в области холста.
• Перейдите к редактору свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства Progress Bar«.
• Найдите свойство Diameter. Теперь есть два способа изменить размер:
• Чтобы установить точный размер, выберите PX и введите нужные значения.
• Чтобы задать размер в % от размера экрана, выберите % и введите нужное значение.

Изменение свойства толщины позволяет изменять размер ленты прогресс-бара.

1. Выберите ProgressBar в дереве виджетов или в области холста.
2. Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства прогресс—бара«.
3. Найдите свойство Thickness и введите значение.

По умолчанию индикатор выполнения начинает заполнение прогресса с позиции верхнего центра (т.е. с 0 градусов). Однако вы можете настроить его так, чтобы он начинал заполнение прогресс-бара с определенного угла, используя свойство Start Angle.

Чтобы изменить угол начала:

• Выберите ProgressBar в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства прогресс—бара«.
• Найдите свойство Start Angle (degree) и введите значение в градусах. Например, при вводе значения 90 индикатор выполнения заполняется справа. В то время как значение 180 заполняет индикатор выполнения снизу.

Панель свойств можно использовать для настройки внешнего вида и поведения линейного индикатора прогресса.

Вы можете изменить размер по умолчанию с помощью свойства Width.

Чтобы изменить размер линейного прогресс-бара, выполните следующие действия:

• Выберите ProgressBar в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства Progress Bar«.
• Найдите свойство Width. Теперь есть два способа изменить размер:
  1. Чтобы установить точный размер, выберите PX и введите нужные значения.
  2. Чтобы задать размер в % от размера экрана, выберите % и введите нужное значение.

Изменение свойства thickness позволяет изменять высоту индикатора прогресса.

1. Выберите ProgressBar в дереве виджетов или в области холста.
2. Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства прогресс—бара«.
3. Найдите свойство Thickness и введите значение.

По умолчанию индикатор выполнения отображается в прямоугольной форме. Однако вы можете сделать ее округлой прямоугольной с помощью свойства End Radius.

Чтобы изменить радиус конца:

• Выберите ProgressBar в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства Progress Bar«.
• Найдите свойство End Radius и введите значение

Есть несколько общих настроек, которые вы можете сделать как для кругового, так и для линейного ProgressBar, например, анимация при загрузке страницы, изменение цвета и стилизация текста.

Свойство Animate Progress позволяет вам определить, должен ли прогрессбар анимироваться при загрузке страницы.

Чтобы включить/выключить анимацию прогресс-бара:

1. Выберите ProgressBar в дереве виджетов или в области холста.
2. Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Свойства прогресс—бара.
3. Найдите свойство Animate Progress и установите/снимите флажок, чтобы включить/выключить анимацию прогресс-бара при загрузке страницы.

Чтобы включить/выключить анимацию прогресс-бара:

1. Выберите ProgressBar в дереве виджетов или в области холста.
2. Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела Свойства прогресс—бара.
3. Найдите свойство Animate Progress и установите/снимите флажок, чтобы включить/выключить анимацию прогресс-бара при загрузке страницы.

Чтобы изменить цвет индикатора выполнения и фона:

• Выберите ProgressBar в дереве виджетов или в области холста.
• Перейдите в редактор свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства индикатора выполнения«.
• Чтобы изменить цвет залитой части индикатора выполнения, найдите свойство Progress Color, нажмите на поле рядом с Unset, выберите цвет, а затем нажмите Use Color или нажмите Unset и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав на кнопку Палитра и просто.
• Аналогично, чтобы изменить цвет незаполненной части индикатора выполнения, найдите свойство Background Color и измените цвет.

Ниже приведены инструкции по стилизации текста.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.

Возможно, вы используете Firstore для хранения данных вашего приложения в модели коллекция-документ. Давайте построим пример отображения значения прогресса в ProgressBar из данных Firestore.

Отображение прогресса из данных Firestore состоит из следующих шагов:

1. Предварительные условия
2. Запрос одного документа
3. Создание пользовательской функции
4. Отображение значения на ProgressBar
5. Отображение значения в тексте ProgressBar

Прежде чем мы получим данные из Firestore, убедитесь, что вы выполнили все перечисленные предварительные условия, чтобы иметь некоторые данные в Firestore.

1. Ознакомьтесь со структурированием базы данных Firebase.
2. Выполните все шаги в разделе Firebase Setup для вашего проекта.
3. Создайте коллекцию под названием Todos.
4. Добавьте данные в коллекцию.

Запись/документ внутри коллекции должен выглядеть следующим образом:

Запрос одного документа на странице помогает получить данные документа, которые могут содержать значение для отображения на ProgressBar.

Чтобы запросить отдельный документ на странице:

1. Выберите страницу.
2. Перейдите на вкладку Backend Query (в правой части экрана).
3. Установите для параметра Query Type значение Query Collection.
4. Прокрутите вниз, чтобы найти выпадающий список Collection и измените его на вашу коллекцию.
5. Установите для параметра Query Type значение Single Documents.
6. Нажмите на + Filter, чтобы найти точный документ/запись.
7. Найдите Имя поля, нажмите на Снять и выберите поле, к которому вы хотите применить фильтр.
8. Найдите выпадающий список Relation, нажмите на Unset и выберите отношение из списка.
9. Найдите свойство Value и установите в нем подходящее значение.
10. Нажмите кнопку Сохранить.

Если вы сохранили значение прогресса, как показано в первом шаге, например 20, 30, 70, то вам нужно создать пользовательскую функцию, которая делит значение на 100 и возвращает результат в виде 0.2, 0.3, 0.7. Это поможет установить значение для свойства Progress Value.

Чтобы создать пользовательскую функцию:

1. Определите функцию, дав ей соответствующее имя, добавьте тип возвращаемых данных Double, а затем создайте аргумент Argument с типом данных Integer. Инструкции по определению функции можно найти здесь.
2. Добавьте код, который делит значение на 100. Инструкции по добавлению кода можно найти здесь.
3. Протестируйте функцию, передав ей случайное значение. Инструкции по тестированию кода можно найти здесь.
4. Нажмите кнопку Сохранить.

Код пользовательской функции:

import ‘dart:math’ as math;

double gerProgressValue(int percentage) {
return percentage / 100;
}

Чтобы показать прогресс на ProgressBar, необходимо вызвать пользовательскую функцию (созданную в предыдущем шаге) и передать значение из данных Firestore.

Чтобы показать значение на индикаторе прогресса:

1. Выберите виджет ProgressBar, перейдите на панель свойств, найдите свойство Progress Value и нажмите на Set from Variable.
2. Установите в качестве источника Custom Functions > Function Name (созданную в предыдущем шаге).
3. В разделе Set Function Arguments нажмите на Argument Name (созданное при определении пользовательской функции), чтобы открыть раздел.
   1. Установите для параметра Источник значения значение Из переменной.
   2. Нажмите на UNSET и выберите Source as [имя_коллекции] Document и Available Options для поля, которое вы хотите показать.
4. Нажмите кнопку Подтвердить.

Текст индикатора выполнения появляется в центре ProgressBar. Поскольку вам нужно отобразить значение со знаком процента, например, 20%, 30% или 70%, вы должны объединить два текста. Первый текст — это данные Firestore, а второй текст — знак ‘%’.

Чтобы показать значение в тексте прогресс-бара:

1. Выберите виджет ProgressBar, перейдите на панель свойств, найдите свойство Text и нажмите на Set from Variable.
2. Выберите Источник > Объединить текст.
3. Установите Текст 1 из переменной как [имя_коллекции] Документ и Доступные параметры в поле, которое вы хотите показать.
4. Нажмите Добавить текст и введите значение в виде знака ‘%‘.
5. Нажмите Подтвердить.

Чтобы выполнить какое-либо действие по щелчку на ProgressBar, добавьте Action во FlutterFlow. Инструкции по добавлению Action вы можете найти здесь.

Инструкции по отображению/скрытию виджета можно найти здесь