Текст

За текст во FlutterFlow отвечают два виджета: Text — одна строка одним стилем, RichText — несколько стилей внутри одного абзаца.

Text

Text выводит строку на экран. Самый частый виджет после Container.

На этом экране всё, что читается, — виджеты Text: название товара «Men’s Harrington Jacket», цена «$148» и описание. Стили у них разные, за счёт этого и выстраивается иерархия: глаз сначала цепляет название, потом цену.

Виджет лежит в палитре во вкладке Base Elements. Перетащите его на холст или вставьте прямо в дерево виджетов.

После выделения справа откроется Properties Panel со стилями: размер шрифта, цвет, выравнивание и остальное.

RichText

RichText нужен, когда внутри одного абзаца стили разные: часть слов жирная, часть — ссылка, часть другого цвета.

Внутри он собран из объектов TextSpan — у каждого свои шрифт, размер и цвет. Так делаются форматированные статьи, пользовательские соглашения и любой текст со вставками.

Виджет лежит там же, во вкладке Base Elements.

При добавлении FlutterFlow сразу создаёт два дочерних объекта RichTextSpan: задайте каждому свой текст и свой стиль.

Важный нюанс для многоязычных приложений: статический текст в RichTextSpan попадает в таблицу языков и переводится. Текст, собранный функцией Combine Text, в таблицу не попадает и кнопкой Translate All не переводится.

Как править объекты RichTextSpan:

Общие свойства стиля

Два свойства, которые чаще всего понимают неправильно:

• Line Height — межстрочный интервал как множитель размера шрифта. Значение 1.5 даёт строку в полтора раза выше кегля.

• Text Align — выравнивание текста внутри его области: по левому краю, по правому, по центру или по ширине.

Дополнительные свойства Text

• Max Lines — максимальное число строк. Всё, что не поместилось, обрезается или заканчивается многоточием — в зависимости от настройки ниже. Нужно там, где под текст отведено фиксированное место: карточки товаров, списки.

• Auto Size

  Auto Size уменьшает шрифт, пока текст не поместится в родительский виджет. Строка остаётся читаемой и не вылезает за границы — полезно, когда длина текста заранее неизвестна.

  Родителю нужны размеры

  Auto Size работает, только если у родительского виджета заданы и ширина, и высота. Без ограничений уменьшать не от чего.

  1. Выделите виджет Text.
  2. Посмотрите на его родителя.
  3. Убедитесь, что ширина и высота у родителя заданы явно.
  внимание

  Без явных размеров родителя Auto Size ведёт себя непредсказуемо.

  Что получается на практике

  • Ширина контейнера infinity, высота 100px, Auto Size выключен — текст вылезает за границы.
  • Ширина infinity, высота 100px, Auto Size включён — шрифт уменьшается под высоту.
  • Ширина 30%, высота не задана, Auto Size включён — эффекта нет: не хватает ограничения по высоте.
  • Ширина 70%, высота 50px, Auto Size включён — шрифт падает до минимально допустимого, лишь бы уместиться.

  

Обрезка длинного текста

Иногда нужно ограничить длину строки и решить, что показывать вместо остатка.

Как настроить:

1. Выделите Text, откройте Properties Panel > Text Properties и задайте Max Character — предел по числу символов.

2. Выберите Text Overflow Replacement:

   • Unspecified — поведение по умолчанию.
   • Clip — обрезать без всяких указаний на то, что текст продолжается.
   • Ellipsis (…) — заменить остаток многоточием.
   • Fade — растворить хвост у края.
   • Visible — оставить как есть. Осторожно: текст наедет на соседние виджеты.

Градиентная заливка

Текст можно залить градиентом — взять готовый пресет или собрать свой.

Порядок такой:

1. Выделите Text, откройте Properties Panel > Text Properties и включите Gradient.

2. Чтобы задать свои цвета:

   1. Выберите Type — Linear или Radial. Linear ведёт цвета по прямой, Radial расходится кругами.
   2. Для Linear укажите Direction, для Radial — Radius.
   3. Добавьте, удалите или измените цвета.

Форматирование чисел

Большие числа без разделителей читаются плохо: 2 354 000 понятнее, чем 2354000, а 4356634444 вообще приходится считать глазами по разрядам.

Для населения уместно 1,200,000 вместо 1200000, для денег — $2K и $5M вместо $2000 и $5000000.

Виды форматирования

• Decimal — с разделителями разрядов (1,200,000, 1.200.000).
• Percent — проценты (28%, 99.99%).
• Scientific — экспоненциальная запись (1e3, 1E6).
• Compact — сокращённо (2.1K, 2.3M, 5B).
• Compact Long — сокращённо словами (2.1 thousand, 2.3 million, 5 billion).
• Custom — свой шаблон, если ни один из вариантов не подошёл.

Как отформатировать число

1. Выделите Text, откройте Properties Panel > Set from Variable и выведите значение переменной типа Integer или Double (например, App State > имя переменной).

2. Задайте Available Options → Number Format, а в Number Format Options выберите нужный вид.

   1. Для Decimal дополнительно указывается Decimal Type — чем отделять разряды: 1,200 запятой или 1.200 точкой.

      1. Automatic — по стране пользователя.
      2. Period for Decimal — точкой (1.200).
      3. Comma for Decimal — запятой (1,200).

   2. Для Custom:

      1. В поле Custom Format введите шаблон. Например, ###,###.### превратит 123456.789 в 123,456.789, а 000.00 превратит 12.786 в 012.79.

      2. В поле Locale укажите локаль, в которой показывать число. Оставите пустым — локаль определится по расположению пользователя. Полный список шаблонов — в документации NumberFormat.

3. Чтобы вывести число как сумму, включите Display as Currency и задайте Currency Symbol.

4. Нажмите Confirm.