Badge

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

Счётчики уведомлений и товаров в корзине

Как добавить

  1. Перетащите Badge из раздела Base Elements в нужное место — например, в секцию Actions у AppBar.
  2. Вложите в него потомка, скажем IconButton, и настройте его.
  3. В Badge Properties подберите Padding — им счётчик сдвигается в нужный угол потомка.

Настройки

Выделите Badge и откройте Badge Properties:

  • Text — содержимое счётчика, обычно число. Значение задаётся вручную или берётся из переменной; раскрыв Text, можно настроить стиль надписи.
  • Show Badge — показывать ли счётчик. Привяжите к переменной, чтобы пустой значок не висел на экране постоянно.
  • Badge Color — цвет подложки.
  • Elevation — высота тени. 0 убирает её совсем.
  • Position (Start or End) — с какой стороны потомка располагается счётчик.
  • Padding — отступы вокруг счётчика, точная подгонка положения.
  • Animate — анимировать ли смену значения.
перевод официальной документации FlutterFlow

обновлено

ESC