Бэйдж

Виджет Badget указывает на количество элементов, требующих вашего внимания. Обычно это точка среднего размера, которая плавает над другими виджетами, такими как IconButton.

Например, вы можете использовать виджет значка, чтобы показать количество непрочитанных уведомлений и товаров в вашей корзине.

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

• Сначала перетащите виджет Badge с вкладки Base Elements и аккуратно опустите его в раздел Actions панели AppBar.
• Теперь добавьте виджет IconButton внутрь виджета Badge. Настройте значок и его цвет в соответствии с вашими требованиями.
• Выберите виджет Badge, перейдите на панель свойств и установите верхний боковой отступ на 5 и правый боковой отступ на 15.

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

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

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

• Выберите виджет «Значок» в области виджетов или на холсте.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства бейджа«.
• Найдите свойство Text и введите значение. Скорее всего, вы установите это значение из переменной или поля из базы данных бэкенда, например, переменной ответа API и поля документа Firestore. Для этого нажмите на кнопку Set from Variable (Установить из переменной).

Чтобы изменить стиль текста бейджа:

• Выберите виджет Badge в области виджетов или холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства бейджа«.
• Найдите свойство «Стиль текста темы» и измените стиль в соответствии с инструкциями здесь.

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

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

• Выберите виджет «Значок» в области виджетов или на холсте.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела Свойства значка.
• Найдите свойство Show Badge и установите/отмените флажок, чтобы показать/скрыть значок. Скорее всего, вы установите это значение из переменной, такой как переменная состояния Local или переменная из ответа API. Для этого нажмите на Set from Variable.

Чтобы изменить цвет бейджа:

• Выберите виджет Badge в области виджетов или холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства бейджа«.
• Найдите свойство Badge Color, нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Use Color или нажмите на уже выбранный цвет и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав кнопку Палитра и просто.

Чтобы изменить высоту (глубину или ось Z) значка:

• Выберите виджет Badge в области виджетов или холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства значка«.
• Найдите поле ввода Elevation и введите значение, чтобы увидеть эффект падающей тени под значком.
• Значение «Выше» задает больший размер тени, а значение «0» убирает тень.

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

Чтобы изменить положение бейджа:

• Выберите виджет «Значок» в области виджетов или на холсте.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства значка«.
• Найдите свойство «Положение (начало или конец)» и нажмите на значки, чтобы изменить положение.

По умолчанию виджет значка анимируется при каждом изменении значения.

Чтобы разрешить/запретить анимировать значок:

• Выберите виджет «Значок» в области виджетов или холста.
• Перейдите к панели свойств (в правой части экрана) и прокрутите вниз до раздела Свойства бейджа.
• Найдите тумблер Анимировать, а затем включите или выключите его.

Здесь приведены инструкции по добавлению подкладок.

Здесь приведены инструкции по настройке выравнивания.

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