Введение в страницы
В FlutterFlow страница представляет собой один экран в вашем приложении. Под капотом страницы используют Scaffold, основной виджет из Flutter, который обеспечивает структурированную разметку для экрана в вашем приложении. Scaffold предоставляет основные элементы, такие как AppBar и Body, позволяя легко создавать экраны.
Страницы состоят из различных элементов интерфейса, или виджетов. Виджеты добавляются на страницу, когда они включаются в дерево виджетов страницы.
Дерево виджетов — это структурное представление того, как виджеты организованы внутри страницы. Подробнее об этом см. в документации по обзору виджетов.
В FlutterFlow страницы автоматически настраиваются для обработки маршрутизации. Кроме того, страницы могут иметь входные параметры и переменные состояния.
Подробнее о том, как и спользовать Scaffold и различные элементы страницы в FlutterFlow, см. в руководстве по элементам страницы.
Создание страницы
В FlutterFlow вы можете легко создать страницу, адаптированную под ваши нужды и предпочтения в дизайне. Независимо от того, начинаете ли вы с нуля, используете шаблон или применяете инструменты ИИ, существует несколько способов достичь желаемой функциональности и эстетики вашей страницы.
При создании страницы в FlutterFlow автоматически генерируются класс Widget и соответствующий класс Model. Их можно просмотреть в просмотрщике кода. Чтобы изучить детали сгенерированного класса Model, обратитесь к описанию кода.
FlutterFlow позволяет легко создавать новые страницы с помощью кнопки Добавить страницу, компонент или поток, которая доступна на вкладке Выбор страницы в навигационном меню. Это поможет вам быстро начать работу и добавить новые страницы в приложение.
Создание пустой страницы
При создании страницы в FlutterFlow одной из опций является начало с пустой страницы, которая предоставляет вам чистый холст. Этот подход позволяет строить интерфейс с нуля, комбинируя виджеты и компоненты в соответствии с вашим видением дизайна и функциональными требованиями.
Чтобы создать пустую страницу FlutterFlow с нуля, следуйте этим шагам:
Создание страницы из популярного шаблона
FlutterFlow упрощает процесс создания страниц, предлагая разнообразные популярные шаблоны. Эти шаблоны предоставляют базовую структуру для ваших страниц, которую вы можете быстро настроить под свой стиль, виджеты и текст.
Чтобы использовать шаблон из FlutterFlow, следуйте этим шагам:
Создание страницы с помощью ИИ
Вы можете быстро создать страницу с помощью FlutterFlow AI, описав, что вы хотите, на естественном языке. ИИ использует ваше описание или визуальную ссылку, а также контекст проекта, чтобы построить страницу с соответствующими виджетами. Это особенно полезно, когда вы начинаете с нуля или быстро прототипируете идеи.
Чтобы создать и добавить сгенерированную ИИ страницу, откройте Дерево виджетов, нажмите кнопку Генерировать с помощью ИИ (волшебная палочка) и выберите вкладку Страница. Далее опишите страницу, которую хотите создать, и нажмите кнопку Отправить (стрелка вверх).
FlutterFlow обработает ваш запрос и отобразит прогресс в панели История генерации ИИ в панели инструментов. Как только страница будет готова, вы сможете просмотреть её в светлой и тёмной темах и применить различные цветовые схемы. Если результат вас устраивает, задайте имя и добавьте страницу в проект.
- Вы также можете загрузить скриншот или изображение страницы, которую хотите создать. FlutterFlow AI использует его как основу для генерации макета.
- Пока ИИ генерирует вашу страницу, вы можете продолжать работать над другими задачами в FlutterFlow, но убедитесь, что не закрываете приложение FlutterFlow.
Импорт из фрейма Figma
Вы также можете быстро превратить свои дизайны Figma в функциональные страницы в FlutterFlow. Предоставив URL фрейма Figma, FlutterFlow AI проанализирует дизайн и автоматически сгенерирует макеты интерфейса, которые максимально соответствуют вашему макету.
Чтобы импортировать из фрейма Figma, сначала подключите аккаунт Figma, импортируйте тему Figma и сопоставьте цвета и типографику соответственно. Далее откройте диалог Генерировать с помощью ИИ и нажмите кнопку Плюс (+). Выберите Импорт из Figma, введите URL фрейма Figma и нажмите Отправить.
Появится предварительный просмотр импортируемого фрейма. Чтобы завершить импорт, нажмите Отправить снова. После завершения страница появится в Истории генерации ИИ, где вы сможете просмотреть и добавить её в проект.
В настоящее время мы не поддерживаем импорт SVG-элементов из ф реймов Figma. Однако вы можете вручную добавить SVG напрямую в активы проекта после завершения генерации или заменить их в Figma на поддерживаемые форматы изображений, такие как PNG или JPEG.