Пользовательский Код
Хотя FlutterFlow предоставляет широкий спектр готовых компонентов и функциональности, иногда может возникнуть необходимость расширить ваше приложение с помощью пользовательской логики или элементов пользовательского интерфейса, которые не доступны изначально. В этом случае вступает в действие написание пользовательского кода.
Существует несколько способов доступа к пользовательскому коду в FlutterFLow:
- Пользовательские Функции: Пользовательские функции на Dart, которые могут использоваться для установки свойств виджетов или действий.
- Пользовательские Действия: Пользовательские функции на Dart, которые могут быть вызваны через Триггеры Действий или использованы как узлы в Потоке Действий. Обычно это асинхронные функции, способные импортировать пользовательские зависимости пакетов.
- Пользовательские Виджеты: Пользовательские виджеты Flutter, которые могут использоваться так же, как Компоненты на всем протяжении вашего проекта.
- Расширение Функциональности: Добавление функциональностей, которые не включены в стандартные компоненты FlutterFlow.
- Пользовательские Интеграции: Интеграция с пакетами сторонних разработчиков или API / базами данных, требующими специфической обработки.
- Уникальные Элементы Интерфейса: Создание уникальных элементов пользовательского интерфейса, которые требуют кастомной отрисовки или взаимодействия.
Написание Пользовательского Кода
Существуют два основных способа написания пользовательского кода в FlutterFlow:
- Использование Редактора Кода в Приложении
- Использование Расширения для Visual Studio Code
Использование Редактора Кода в Приложении
Вы можете использовать Редактор Кода в Приложении для просмотра и редактирования пользовательского кода непосредственно в приложении FlutterFlow.
Обратите внимание, что десктопная версия Редактора Кода в Приложении имеет ограничения. Мы рекомендуем использовать веб-редактор или Расширение для VSCode.
Помимо вышеописанных ресурсов пользовательского кода, вы также увидите дополнительный раздел в левой боковой панели страницы "Пользовательский Код" - Пользовательские Файлы:.
Внутри Пользовательских Файлов у вас будет возможность редактировать некоторые части файла main.dart.
Помощник Кода
Помощник Кода - это функция, которая помогает вам генерировать фрагменты кода, функции или целые блоки кода на основе описаний на естественном языке того, что вы хотите достичь. Это значительно ускоряет процесс создания приложения и уменьшает необходимость в глубоких знаниях программирования, что особенно полезно для пользовательских функций и действий.
Ограничение: На данный момент подсказки ограничены 100 символами.
Компиляция Кода
Когда вы закончите добавление ваших фрагментов кода, вы можете скомпилировать его, чтобы убедиться, что нет ошибок компиляции и что ваш код может быть преобразован в что-то, что можно выполнить при запуске вашего приложения.
Для этого нажмите кнопку Компилировать Код.
Для запуска вашего приложения обязательно убедитесь, что Пользовательские Функции скомпилированы.
Пользовательские Виджеты и Действия не нуждаются в компиляции для экспорта кода или тестирования вашего приложения. Однако вы не сможете предварительно просмотреть Пользовательские Виджеты в редакторе до тех пор, пока они не будут скомпилированы. Если вы не скомпилируете Пользовательские Виджеты или Действия, вы увидите предупреждение о проекте.
Скомпилирование Пользовательских Функций должно быть достаточно быстрым, но иногда компиляция Пользовательских Действий и Виджетов занимает продолжительное время.
Анализатор Кода
Анализатор кода доступен во всех ваших пользовательских фрагментах кода и обеспечивает качество и кор ректность вашего пользовательского кода. Он автоматически проверяет ваш код на Dart на наличие ошибок и предупреждений, предоставляя обратную связь в реальном времени по мере вашего написания.
Когда возникает ошибка компиляции, анализатор кода останавливается и отображает ошибки, выявленные компилятором. После исправления сохраните код и повторно запустите его, используя кнопку Компилировать Код. Тогда анализатор кода должен быть переподключен. Если нужно, вы также можете вручную повторно подключить его.
Автоматические Импорты Пользовательского Кода
При создании нового пользовательского фрагмента кода (Действий, Виджетов или Функций) в FlutterFlow для вас автоматически добавятся некоторые фундаме нтальные импорты. Разработчик не может изменять эти импорты для Пользовательских Функций, но может добавлять пользовательские импорты в Пользовательские Действия и Виджеты после строки "Do not remove or modify the code above".
Настройки Пользовательского Кода
При редактировании пользовательского фрагмента кода в FlutterFlow блок Настроек откроется справа. Этот блок может немного отличаться в зависимости от типа пользовательского кода (Действия, Функции, Виджеты), но здесь мы обсудим общие настройки.
Исключить из Компиляции
Если по какой-то причине ваше действие или виджет не может быть скомпилировано, но вы по-прежнему хотите компилировать остальной код, вы можете включить этот переключатель. Таким образом проблемный код будет исключен из процесса компиляции.
Эта опция доступна только для Пользовательских Виджетов и Пользовательских Действий.
Включить BuildContext
Эта настройка определяет, передавать ли BuildContext виджета, вызывающего это пользовательское действие, как аргумент. Это полезно для действий, которые должны взаимодействовать с деревом виджетов или получать доступ к данным, специфичным для контекста.
Эта опция доступна только для Пользовательских Действий.
Входные Аргументы
При написании пользовательского кода в FlutterFlow вы можете определять входные аргументы, чтобы сделать ваш пользовательский код более динамичным и переиспользуемым. Входные аргументы позволяют передавать данные в ваш пользовательский код, позволяя ему выполнять различные задачи в зависимости от предоставленных входных данных. Используя входные аргументы, вы можете создавать более гибкие и мощные кастомные коды, способные адаптироваться к различным сценариям в вашем приложении.
Вот пример действия, принимающего 2 аргумента: cartItems, который является Списком товаров и productId, который является Строкой.
Когда вы определяете пользовательский тип данных в FlutterFlow, сгенерированный код будет обращаться к типу как <ИмяВашегоТипа>Struct. Например, если ваш пользовательский тип данных называется Товары, он будет ссылаться в сгенерированном коде как ТоварыStruct.
Добавить Обратное Действие
Обратное действие - это действие, передаваемое в качестве параметра в пользовательское действие или виджет и запускаемое в какой-то момент в будущем, когда происходит определенное событие.
Это особенно полезно, когда вы хотите запускать действия из пользовательской логики или действий виджетов и включать их в пользовательское поведение. Например, если произошла ошибка в пользовательской логике, вы можете немедленно вызвать действие, чтобы сообщить пользователю об ошибке, а затем продолжить выполнение или завершиться с возвратом значения по умолчанию.
В программировании обратные вызовы - это функции, передаваемые в другие функции для вызова при наступлении определенного события.
В следующем примере у нас есть Пользовательское Действие, которое принимает обратное действие onError(searchKeyword) с параметром действия searchKeyword. Это означает, что пользовательское действие вернет этот поисковый запрос обратному действию при вызове его.
Предоставить действие обратного вызова основному действию
Чтобы предоставить действие обратного вызова основному пользовательскому действию, ознакомьтесь с этим быстрым руководством, где мы предоставляем действие "Показать Snackbar" для onError, отображая объединенный текст, используя поисковый запрос.
Возвращаемые Значения
В FlutterFlow пользовательский код может не только принимать входные аргументы, но также возвращать значения обратно вызывающему. Возвращаемые значения позволяют вашим пользовательским функциям или действиям передавать данные обратно в основное приложение, что позволяет дальнейшей обработке или обновлению пользовательского интерфейса на основе результатов пользовательского кода.
Возвращаемые значения доступны только для Пользовательских функций и Пользовательских Действий. Пользовательские Виджеты не могут возвращать значение на данный момент.
Вот пример Действия, возвращающего нулевой целочисленный тип.
Добавление Зависимости Pubspec
Зависимость pubspec можно добавить только к Пользовательскому Действию и Пользовательским Виджетам.
Pub.dev
Pub.dev - официальный репозиторий пакетов для Dart и Flutter. Он предлагает широкий спектр пакетов, библиотек и инструментов, которые разработчики могут использовать для расширения функциональности своих приложений на Dart и Flutter.
Пакеты Флаттера Favorite - это от