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

Определение стилей текста (Типографика/Шрифты)

Чтобы изменить семейство шрифтов на уровне проекта, откройте Настройки темы (из навигационного меню) > Типографика и значки, нажмите на кнопку под Primary Font Family или Secondary Font Family, найдите и выберите новый шрифт.

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

Вы можете настроить следующие свойства каждого стиля текста:

  • Размер шрифта — Используйте этот параметр для задания размера текста.
  • Расстояние между буквами — используется для установки расстояния между символами.
  • Курсив — флажок для включения стиля шрифта курсив.
  • Вес шрифта — Выберите вес шрифта из Тонкий, Очень светлый, Светлый, Нормальный, Средний, Полужирный, Жирный, Очень жирный и Черный.
  • Цвет — Установите цвет текста, используя выбор цвета или указав шестнадцатеричное значение.
  • Семейство шрифтов — здесь можно изменить семейство шрифтов для любого стиля. Нажмите здесь, чтобы установить семейство шрифтов из Google Fonts или выбрать из загруженных пользовательских шрифтов. Вы также можете выбрать, является ли этот стиль первичным или вторичным семейством шрифтов.
тип ё

Добавление отзывчивых стилей текста

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

Посмотрите, как отображаются тексты с отзывчивым стилем шрифта и без него:

тип 2
тип 3

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

  1. Откройте Настройки темы (из меню навигации) > Типографика и значки.
  2. Нажмите на кнопку Сделать отзывчивым.
  3. Теперь все стили доступны на трех вкладках. Mobile, Tablet и Desktop. Измените каждый стиль под вкладками различных платформ, которые вы поддерживаете.
  4. Запустите приложение и посмотрите, как отображаются тексты при смене платформы.
тип 4

Добавление пользовательских шрифтов

Добавление пользовательских шрифтов в ваше приложение выделяет его среди других. В этом разделе вы можете загрузить свои собственные шрифты. Вы можете загружать файлы пользовательских шрифтов типов .ttf, .otf и .woff. После загрузки шрифта его можно использовать непосредственно в виджете или добавить в раздел стилей текста для создания общей темы.

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

Чтобы добавить пользовательские шрифты:

  1. Откройте Настройки темы (из навигационного меню) > Типографика и значки.
  2. Прокрутите вниз до раздела «Пользовательские шрифты».
  3. Нажмите на кнопку + Добавить шрифт.
  4. Введите название семейства шрифтов и нажмите кнопку Загрузить файл(ы).
  5. Выберите и загрузите шрифт.
  6. Нажмите кнопку Добавить шрифт. Отобразится новый добавленный шрифт.
  7. Чтобы использовать пользовательский шрифт непосредственно в виджете, перейдите на панель свойств, нажмите на уже примененное семейство шрифтов, выберите вкладку Пользовательские шрифты, а затем выберите шрифт.
  8. Чтобы использовать пользовательский шрифт для общего стиля текста, откройте раздел Стили текста, нажмите на уже примененное семейство шрифтов, выберите вкладку Пользовательские шрифты, а затем выберите шрифт.
тип 5

Добавление пользовательских иконок

Добавление пользовательских иконок в ваше приложение поможет вам создать фирменный стиль. Прежде чем добавлять пользовательские иконки в FlutterFlow, необходимо сгенерировать их на любом сайте генерации иконок (например, fluttericon или iconmoon) и экспортировать их, используя соответствующие настройки.

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

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

  1. Перейдите на iconmoon.
  2. Импортируйте свой собственный значок (.svg) или выберите из бесплатного набора значков.
  3. Выберите вкладку «Генерировать шрифт».
  4. Нажмите кнопку Настройки (значок шестеренки) рядом с текстом загрузки в правом нижнем углу.
  5. Включите опцию Generate Dart class for Flutter.
  6. Нажмите на кнопку Download и распакуйте загруженный файл.
тип 6
  1. Откройте свой проект FlutterFlow, перейдите в Настройки темы (из меню навигации) > Типографика и значки.
  2. Прокрутите вниз до раздела «Пользовательские значки».
  3. Нажмите на кнопку + Добавить значки.
  4. Нажмите на кнопку Загрузить файл иконки.
  5. Выберите и загрузите файл .ttf в папке «Загруженные файлы» > «Шрифты».
  6. Теперь нажмите на кнопку Upload Icon Info.
  7. Выберите и загрузите файл с именем.dart в папке загруженных файлов (помимо папки fonts).
  8. Нажмите кнопку Добавить иконки.
  9. Чтобы использовать пользовательский значок, добавьте виджет Icon, перейдите на панель свойств и прокрутите вниз до раздела Icon.
  10. Нажмите на уже выбранный значок, выберите вкладку Пользовательские значки, а затем выберите свой значок.
тип 7