Перейти к основному содержимому

Общие настройки

Этот раздел служит центром управления для настройки ключевых аспектов вашего приложения.

Детали приложения​

Этот раздел позволяет настроить широкий спектр параметров, которые важны для общей функциональности и внешнего вида вашего приложения. От базовых настроек, таких как имя проекта и пакета (bundle), до более продвинутых, таких как настройка темы и управление навигацией.

Изменение имени проекта, пакета и отображаемого имени​

Измените имя приложения или пакета вашего проекта в этих настройках. Вы также можете определить разные имена пакетов в зависимости от выбранной среды разработки.

Вы можете установить разные имена для App Store и Play Store с помощью Display Name.

подсказка

После изменения имени пакета в панели инструментов могут появиться ошибки из-за недействительных файлов конфигурации Firebase. Чтобы исправить это, сгенерируйте новые файлы конфигурации, перейдя в Settings & Integrations > Project Setup > Firebase > Regenerate Config Files.

Начальная страница​

Вы можете указать Entry Page и Logged In Page в этом разделе.

  • Entry Page: Эта страница служит домашней страницей для вашего приложения. Когда аутентификация отключена, все пользователи по умолчанию направляются на эту страницу. Если аутентификация включена, эта страница становится страницей входа, регистрации или онбординга для неаутентифицированных пользователей.
  • Logged In Page (доступно только если auth включена): Эта страница отображается при запуске приложения для аутентифицированных пользователей. Если пользователь успешно входит в систему, он автоматически перенаправляется на указанную здесь страницу. Если пользователь уже аутентифицирован, эта страница обходит Entry Page.

Чтобы установить страницу, просто выберите нужную страницу из выпадающего меню.

Организация папок​

Если вы хотите улучшенную организацию папок для вашего проекта, включите Enable Updated Folder Organization. Это особенно полезно для старых проектов; для новых проектов это включено по умолчанию.

Настройки загрузки​

  • Run "dart fix": Включение этого запустит команду dart fix при загрузке кода. Это делает сгенерированный код чище и потенциально более производительным.
  • Download Unused Project Assets: Включите этот параметр, чтобы загрузить все ассеты, включая те, которые в настоящее время не используются в проекте. Это полезно, когда вам нужно получить доступ и использовать ассеты в пользовательском коде или других частях вашего проекта.

Маршрутизация и глубокие ссылки​

Настройте глобальные параметры навигации и глубоких ссылок в вашем приложении. Чтобы узнать, как настроить deeplinks, ознакомьтесь с руководством Deep & Dynamic Linking.

Настройки отображения​

Раздел Display Settings позволяет настроить, как масштабируется текст в вашем приложении. Это особенно полезно для доступности, обеспечивая комфортное чтение контента для пользователей с нарушениями зрения.

  • Min Text Scaling Factor: Определяет минимальный допустимый масштаб для текста. Это предотвращает уменьшение текста ниже определенного порога, помогая сохранить читаемость для всех пользователей. Например, установка этого значения в 1 гарантирует, что текст никогда не будет отображаться меньше базового размера, независимо от настроек устройства или предпочтений пользователя.
  • Max Text Scaling Factor: Определяет максимальный допустимый масштаб для текста. Это ограничивает, насколько большим может быть текст, что полезно для сохранения последовательности макета на устройствах с включенным масштабированием текста для доступности. Например, установка этого значения в 10 позволяет тексту масштабироваться до 10× от исходного размера.
  • Persist Text Scaling Factor: Когда включено, текущий коэффициент масштабирования текста будет сохранен и применен даже после перезапуска приложения. Это обеспечивает последовательный пользовательский опыт между сессиями. Обратите внимание, что эта настройка требует установки как Min, так и Max Text Scaling Factors. Если хотя бы один из них не установлен, сохранение не будет иметь эффекта.
к сведению

После установки коэффициентов масштабирования текста вы можете использовать действие Update Text Scaling Factor, чтобы позволить пользователям динамически регулировать размер текста.

Давайте разберем это на примере. Предположим, Min Text Scaling Factor установлен в 1.0, а Max Text Scaling Factor — в 5.0. Если устройство пользователя запрашивает коэффициент масштабирования 2.5, FlutterFlow примет его, поскольку он находится в допустимом диапазоне. Таким образом, если базовый размер шрифта 16.0, окончательный отображаемый размер будет: 2.5 × 16.0 = 40.0

Если устройство запрашивает коэффициент масштабирования выше 5.0 (например, 6.0), он будет ограничен 5.0. Таким образом, для базового размера шрифта 16.0 окончательный отображаемый размер будет: 5.0 × 16.0 = 80.0.

Аналогично, если устройство запрашивает коэффициент ниже 1.0 (например, 0.5), он будет повышен до 1.0 для обеспечения читаемости. Результирующий размер шрифта останется: 1.0 × 16.0 = 16.0.

Ассеты приложения​

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

Сплеш-экран​

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

Шаги по настройке сплеш-экрана следующие:

  1. Перейдите в Setting and Integrations из Navigation Menu > раздел General > App Assets.

  2. В разделе Splash нажмите кнопку Upload Image и загрузите изображение, которое вы хотите отобразить на сплеш-экране.

  3. Вы можете попробовать любые из опций Image Fit, чтобы определить, как отображать загруженное изображение на сплеш-экране.

  4. Чтобы самостоятельно контролировать размеры изображения, вы можете установить свойства width и height.

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

  5. Свойство Min Duration помогает установить время, в течение которого сплеш-экран будет видимым, где (1000ms = 1 second).

  6. Вы также можете установить Background Color, чтобы он соответствовал фону изображения.

  7. В мобильных приложениях иногда можно заметить кратковременный белый экран (пока загружается движок Flutter) перед отображением сплеш-экрана. Чтобы изменить цвет этого экрана, используйте свойство Pre-loading Color.

  8. Обычно веб-приложения не используют сплеш-экран, поэтому, если вы предпочитаете более традиционный веб-опыт, вы можете выбрать Disable for Web.

splash-screen-configuration

Иконка лаунчера​

Иконка лаунчера (также известная как иконка приложения) представляет ваше приложение. Когда вы открываете приложение-лаунчер, оно показывает иконки всех установленных приложений. Она служит точкой входа в ваше приложение. Ассет изображения, который вы загрузите здесь, будет использоваться как иконка лаунчера приложения.

Чтобы добавить иконку лаунчера приложения:

  1. Нажмите на Setting and Integrations из Navigation Menu (слева на экране).

  2. В разделе General выберите App Assets.

  3. В разделе Launcher Icon нажмите кнопку Upload Image.

  4. Нажав на выпадающее меню Unset, вы также можете выбрать из уже загруженных изображений в Project Media/Assets.

  5. Download the project и выполните следующую команду в терминале, чтобы сгенерировать иконку лаунчера:

    flutter pub run flutter_launcher_icons:main

  6. Run your app на реальном устройстве или эмуляторе, чтобы увидеть иконку лаунчера приложения.

Адаптивная иконка Android​

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

  1. Foreground layer: Этот слой обычно содержит логотип или основной визуальный элемент иконки.
  2. Background layer: Этот слой предоставляет заливку (цвет или фоновое изображение) за передним планом, которую может манипулировать ПО устройства.

Вот шаги по добавлению адаптивных иконок:

  1. Create an adaptive icon. Вы можете использовать этот online tool или эти resources, чтобы создать одну.

  2. Вернитесь в FlutterFlow и перейдите в Setting and Integrations > General > App Assets > Android Adaptive Icon.

    1. Загрузите Foreground Icon. Если вы используете онлайн-инструмент, вы найдете его внутри IconKitchen-Output > android > res > mipmap-xxxhdpi > ic_launcher_foreground.png.
    2. Для Background Type вы можете установить Color или Image. Рекомендуется использовать цвет, соответствующий бренду вашего приложения, для cohesive look.

  3. Download the project и выполните следующую команду в терминале, чтобы сгенерировать иконку лаунчера:

    flutter pub run flutter_launcher_icons:main

  4. Run your app на реальном устройстве или эмуляторе, чтобы увидеть иконку лаунчера приложения.

android-adaptive-icon

Полезные ресурсы​

Ознакомьтесь со следующими ресурсами для получения дополнительной информации об адаптивных иконках Android.

Создание адаптивной иконки​

Основы адаптивных иконок​

Ознакомьтесь, как настроить Nav Bar и App Bar.