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

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

Данные приложения

• Project Name — название проекта во FlutterFlow; видно только внутри платформы.
• Project Description — заметка о проекте для коллег: что это за приложение и зачем оно нужно.

Имена приложения

App Names задаёт идентификатор пакета и отображаемое имя для каждого окружения.

• Current Environment — окружение, которое вы настраиваете: Production, Staging или Development.
• Package Name — уникальный идентификатор пакета. У каждого окружения он может быть свой.
• Display Name — имя, которое видит пользователь: под иконкой на устройстве и в App Store или Play Store.

Закреплённая версия FlutterFlow

Проект можно закрепить за конкретной версией FlutterFlow или оставить на Latest Version (Unpinned). Для сложных проектов закрепление — способ не получить сюрприз от очередного обновления платформы.

Подробнее — Закрепление проекта за стабильной версией FlutterFlow.

Стартовая страница

Здесь задают Entry Page и Logged In Page.

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

Страница выбирается из выпадающего списка.

Настройки выгрузки кода

• Run “dart fix” — при скачивании кода выполняется команда dart fix: код получается чище и местами быстрее.
• Download Unused Project Assets — скачивать все ресурсы, включая те, что в проекте сейчас не используются. Пригодится, если вы обращаетесь к ним из кастомного кода.

Маршруты и диплинки

Настройки навигации, общие для всего приложения.

• Override Default Transition — задать переход между страницами по умолчанию; отдельная страница или действие смогут его переопределить.
• Pages Require Authentication by Default — по умолчанию требовать авторизацию для страниц; на уровне страницы доступ по-прежнему настраивается отдельно.
• Use Firebase Dynamic Links — включайте, если проект всё ещё завязан на Firebase Dynamic Links. Для новых проектов смотрите руководство по диплинкам.
• URL Scheme — схема и домен для диплинков. Значения должны быть уникальными для вашего приложения и совпадать с настроенным доменом.
• Advanced Route Settings — дополнительные настройки маршрутизации.

Масштаб текста

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

• Min Text Scaling Factor — минимальный масштаб. Например, 1 означает, что текст никогда не станет меньше базового размера, что бы ни было выставлено в системе.
• Max Text Scaling Factor — максимальный масштаб. Ограничение спасает вёрстку: 10 разрешает увеличение до десятикратного.
• Persist Text Scaling Factor — запоминать выбранный масштаб между запусками. Работает, только если заданы и минимум, и максимум; без одного из них настройка ни на что не влияет.

Разберём на числах. Минимум — 1.0, максимум — 5.0. Устройство запрашивает масштаб 2.5: он в допустимых пределах, поэтому применяется как есть, и текст с базовым размером 16.0 отрисуется как 2.5 × 16.0 = 40.0.

Если устройство запросит 6.0, значение упрётся в потолок 5.0, и размер составит 5.0 × 16.0 = 80.0.

Если запрошено 0.5 — сработает нижняя граница 1.0, и текст останется базовым: 1.0 × 16.0 = 16.0.

Настройки интерфейса

• Show Component Preview in Palette — показывать превью компонентов в палитре виджетов: так их проще узнавать в лицо, а не по названию.

Ресурсы приложения

В App Assets загружают изображения для экрана запуска и иконку приложения.

Экран запуска

Экран запуска (splash) — первое, что видит пользователь. Он занимает те секунды, пока приложение готовится к работе, и обычно показывает логотип.

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

1. Откройте Settings and Integrations в меню навигации → раздел General → App Assets.

2. В блоке Splash нажмите Upload Image и загрузите изображение.

3. Параметр Image Fit определяет, как изображение впишется в экран.

4. Размеры задаются вручную свойствами width и height:

   • точный размер — выберите PX и введите значения;
   • доля экрана — выберите % и введите значение.

5. Min Duration задаёт минимальную длительность показа; 1000 мс — это одна секунда.

6. Background Color — фон под изображением.

7. На мобильных перед экраном запуска иногда мелькает белый экран — это загружается движок Flutter. Его цвет задаётся свойством Pre-loading.

8. Веб-приложениям экран запуска обычно не нужен — для них есть Disable for Web.

Иконка приложения

Иконка (launcher icon) представляет приложение на устройстве пользователя. Загруженное здесь изображение и станет ею.

Как её добавить:

1. Откройте Settings and Integrations в меню навигации.

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

3. В блоке Launcher Icon нажмите Upload Image.

4. Через список Unset можно выбрать изображение из уже загруженных в проект.

5. Скачайте проект и выполните в терминале:

   flutter pub run flutter_launcher_icons:main

6. Запустите приложение на устройстве или эмуляторе и посмотрите на результат.

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

Адаптивные иконки подстраиваются под оболочку устройства: система сама решает, какой формы будет иконка. Состоят они из двух слоёв:

1. Передний слой — логотип или главный элемент.
2. Задний слой — фон под ним: цвет или изображение, с которым система может работать по-своему.

Как добавить адаптивную иконку:

1. Создайте её — например, в онлайн-инструменте или по материалам ниже.

2. Вернитесь во FlutterFlow: Settings 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 — фон стоит взять из фирменной палитры приложения.

3. Скачайте проект и выполните в терминале:

   flutter pub run flutter_launcher_icons:main

4. Запустите приложение на устройстве или эмуляторе.

Полезные материалы

Подробнее об адаптивных иконках Android.

Как создать адаптивную иконку

• Создание иконок в Android Studio
• Шаблон для Figma (нужен вход)
• Шаблон для Affinity Designer
• Шаблоны Bjango — включают адаптивные иконки
• Шаблон для Adobe XD

Как они устроены

• Understanding Android Adaptive Icons
• Designing Adaptive Icons
• Implementing Adaptive Icons

Панели навигации

Как настраиваются Nav Bar и App Bar.