Панель инструментов находится в верхней части страницы конструктора пользовательского интерфейса. Она состоит из различных кнопок для конфигурирования проекта, сохранения версии приложения, добавления новой страницы, создания отчетов/отладки любых проблем, загрузки кода приложения и мгновенного запуска приложения прямо во FlutterFlow.

toolbar

1. Информация о проекте

В этом разделе отображается основная информация о проекте. Здесь вы можете легко проверить название проекта, текущую версию FlutterFlow, которую вы используете, а также дату ее выпуска. Кроме того, здесь отображается версия Flutter, на которой в данный момент работает проект.

тул 1

2. Обмен ссылками на конкретную страницу

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

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

тул 2

3. Клавиатурные сочетания

С помощью сочетаний клавиш можно выполнять обычные действия, связанные с виджетами, и запускать проект в режиме Test или Run всего несколькими нажатиями клавиш, экономя время и силы.

тул 3

4. Палитра команд

Палитра команд помогает быстро ориентироваться в конструкторе приложений. Всего одним щелчком мыши можно получить доступ к темам приложения, просмотреть код, добавить/дублировать страницу и т.д.
Вы можете получить доступ к ней, нажав кнопку поиска или нажав Cmd/Ctrl + K.

тул 4

5. Размер холста

FlutterFlow позволяет визуализировать и проектировать приложение для различных мобильных, планшетных и настольных устройств. Размер холста определяется как ширина (в пикселях) x высота (в пикселях). Этот размер определяется в зависимости от выбранного устройства. Чтобы задать пользовательский размер холста, нажмите на «Размер холста» на панели инструментов и введите ширину и высоту (в пикселях), которые вы хотите использовать.

ezgif.com-gif-maker (19)

6. Контроль версий

Контроль версий отслеживает изменения, внесенные в проект FlutterFlow. Если что-то пойдет не так (возможно, вы удалите страницу/компонент или по ошибке удалите какую-то конфигурацию), вы можете откатиться к ранее сохраненному состоянию вашего проекта.

Screenshot 2022-02-24 at 11.37.47 AM

6.1 Сохранение версии

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

Чтобы сохранить текущую версию:

  • Внесите некоторые изменения в ваш проект.
  • Нажмите на выпадающий список версий. Откроется всплывающее меню. (Если вы сохраняете версию впервые, она будет отображаться как версия V1).
  • Нажмите на кнопку Сохранить версию. Откроется новое всплывающее окно.
  • Введите сообщение, описывающее эту версию. Например, если вы добавили темный режим на какую-либо страницу, то вместо просто » Темный режим» следует написать «Добавлен темный режим на страницу автомобиля».
  • Нажмите на кнопку Сохранить версию.
ezgif.com-gif-maker (1) (2)

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

Чтобы сохранить текущую версию:

  • Внесите некоторые изменения в ваш проект.
  • Нажмите на выпадающий список версий. Откроется всплывающее меню. (Если вы сохраняете версию впервые, она будет отображаться как версия V1).
  • Нажмите на кнопку Сохранить версию. Откроется новое всплывающее окно.
  • Введите сообщение, описывающее эту версию. Например, если вы добавили темный режим на какую-либо страницу, то вместо просто » Темный режим» следует написать «Добавлен темный режим на страницу автомобиля».
  • Нажмите на кнопку Сохранить версию.

7. Восстановление версии

Чтобы восстановить предыдущую версию:

  • Нажмите на выпадающий список версий. Откроется всплывающее меню.
  • В списке ранее сохраненных версий выберите версию, которую вы хотите восстановить, и нажмите на кнопку Восстановить.
  • Появится всплывающее окно подтверждения. Нажмите на кнопку Да, восстановить.
ezgif.com-gif-maker (2) (2)

8. Добавить страницу

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

ezgif.com-gif-maker (20)

9. Помощь

Нажав кнопку Помощь, вы получите доступ к некоторым важным ссылкам на ресурсы, которые пригодятся вам при создании приложений с использованием FlutterFlow. Вы можете подписаться на доступ к форуму сообщества FlutterFlow. Здесь приведены инструкции по настройке учетной записи сообщества.

10. Как отправлять сообщения об ошибках и запросы о функциях

Кнопка «Обратная связь» позволяет вам отправлять сообщения об ошибках, запросы о возможностях и общие отзывы. Вы также найдете ссылку на наш канал YouTube и ссылку для присоединения к нашему каналу Discord.

ezgif.com-gif-maker (50)

11. Проблемы проекта

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

ezgif.com-gif-maker (22)

12. Меню разработчика

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

ezgif.com-gif-maker (23)

12.1 Просмотр кода

Эта опция позволяет отобразить код Dart для всех экранов вашего проекта FlutterFlow. Здесь вы также можете посмотреть на зависимости, используемые приложением.

12.2 Подключить репозиторий GitHub (платная функция)

Вы можете использовать эту опцию, чтобы связать проект FlutterFlow с вашей учетной записью GitHub и загрузить его в репозиторий GitHub. Когда вы нажмете на эту опцию, вы перейдете в раздел Настройки и интеграции > Интеграция.

На этой странице вы можете настроить свой проект и добавить в него интеграцию с GitHub. Это позволит вам загрузить всю кодовую базу вашего приложения в репозиторий в новой ветке под названием flutterflow.

12.3 Загрузить код (платная функция)

Вы можете загрузить всю кодовую базу приложения Flutter, созданного FlutterFlow, используя опцию Download Code. Будет загружен файл в формате (.zip). Вы можете открыть его содержимое с помощью любого редактора кода для внесения изменений. Во время загрузки кода FlutterFlow также покажет несколько команд, которые необходимо выполнить для получения зависимостей и генерации кода.

Screenshot 2021-09-09 at 5.14.23 PM

13. Сборка APK

Вы можете использовать кнопку Создать APK для создания релизной сборки вашего приложения Flutter. После завершения процесса сборки будет автоматически загружен файл (.apk). После начала процесса сборки на экране FlutterFlow появится следующая подсказка:

Screenshot 2021-09-09 at 6.22.10 PM

APK можно использовать для легкого тестирования приложения на любом устройстве Android.

14. Предварительный просмотр

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

ezgif.com-gif-maker (24)

15. Запуск

В режиме запуска вы можете протестировать полнофункциональную версию вашего приложения FlutterFlow — включая данные в реальном времени. Приложение будет создано, что обычно занимает около 2-4 минут, но может быть и дольше для больших проектов. Затем вы сможете взаимодействовать с вашим приложением через веб-браузер.

ezgif.com-gif-maker (24)

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

Существует два способа поделиться копией своего приложения режима запуска:

  • Нажмите на выпадающее меню внутри кнопки Запуск. Версия запуска проекта показывает список всех ваших предыдущих ссылок на запуск. Включите тумблер, чтобы сделать любую ссылку общедоступной.
  • Или, как только режим запуска будет завершен, выберите Сделать общедоступным.
  • Поделиться ссылкой. Она должна быть скопирована в ваш буфер обмена. Если это не работает, убедитесь, что включили буфер обмена.

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

Screenshot 2021-09-09 at 6.13.26 PM

15.1 Тестовый режим

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

Чтобы запустить приложение в тестовом режиме:

  • Нажмите на выпадающее меню внутри кнопки Запуск.
  • Нажмите на кнопку Тест. Это запустит ваше приложение в новом окне браузера.
  • Переключитесь на конструктор пользовательского интерфейса FlutterFlow и внесите некоторые изменения в приложение, например, измените цвета, выравнивание.
  • Теперь переключитесь на вкладку Тестовый режим и нажмите Instand Перезагрузка, чтобы увидеть изменения в течение 10 секунд.
ezgif.com-gif-maker (25)