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

Вот как оно выглядит в готовом виде:

Видео:https://www.loom.com/share/d99266c8070040b9a7484646e457e09e?sid=1bdb476b-4d64-4591-8938-8e4f6204cb16

Создание приложения выполняется следующим образом:

1. Клонируйте или создайте проект
2. Создание пользовательского интерфейса
3. Настройка дизайна
4. Добавление данных и логики
5. Запуск приложения

Чтобы начать работу над проектом, первым шагом будет создание нового проекта. Однако, чтобы упростить задачу, мы уже создали для вас стартовое приложение. Просто откройте эту ссылку, нажмите кнопку «Клонировать», и проект будет мгновенно добавлен в вашу учетную запись.

Видео:https://www.loom.com/share/f8522aeb0c654f6faa3b97cf1d55bb22?sid=cafa1320-2ea0-45bf-8e9f-b2f741f22270

На этом этапе мы добавим элементы пользовательского интерфейса или виджеты для страниц «Главная» и «Избранное», а также навигацию между этими страницами.

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

Чтобы создать главную страницу, выполните следующие действия:

• Добавьте виджет IconButton на панель AppBar. На панели свойств удалите цвет заливки, цвет границы и ширину границы. Затем установите значок сердца. Он будет использоваться для перехода пользователей на страницу «Избранное».

Видео:https://www.loom.com/share/38a5170871434937aa4d680bdabb24e5?sid=ec1adb9f-ce8e-45f5-ac3d-8b427d6d943b

• Откройте дерево виджетов, добавьте виджет Список (ListView) внутрь столбца (Column) и на панели свойств сделайте его развернутым (Expanded), чтобы он занял все свободное пространство.
  • Внутри списка добавьте виджет ‘card_54_TravelCard’ из Templates и удалите виджет ценового контейнера.

Видео:https://www.loom.com/share/9623f44203cc41448148a6cf2d55fb33?sid=848d5084-1bcc-4fd9-9644-5d7ec468006e

• Справа от названия места назначения добавьте виджет Conditional Builder. Этот виджет будет динамически отображать различные значки сердечек в зависимости от того, отмечено ли это место как любимое или нет. Мы добавим условие в следующем разделе этого руководства. Пока же просто добавьте виджет IconButton с включенными и выключенными значками сердечек для условий IF и ELSE.

Видео:https://www.loom.com/share/7989a4ae391f4a839e8a37cedb503884?sid=879f6d31-539b-40fb-ae96-1f2125e0e8f0

На странице «Избранное» отображается список избранных мест, сохраненных пользователем. Добавим новую страницу из шаблона «Списки > Список 08 — Список продуктов».

Дадим ей имя, удалим ненужный виджет, а затем изменим тип AppBar в соответствии с нашим дизайном.

Видео:https://www.loom.com/share/ad2a62292bd34225ab297f5650fd301e?sid=607c8e09-ae07-417b-bab8-006444aab3ba

Переход с главной страницы на страницу избранного осуществляется путем добавления действия «Переход к» на виджет (например, кнопку с сердечком на панели приложений).

Видео:https://www.loom.com/share/e03a0d5438864c12b92b9becaa49c696?sid=0d3911a7-11fd-497f-9f6a-f6ee5d1e3e64

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

Анимация позволяет придать приложению более совершенный вид. Давайте добавим анимацию слайдов на виджет ‘card_54_TravelCard’.

Видео:https://www.loom.com/share/634d6da7749f4703933778bfcfedbed4?sid=157ea7f1-08c8-41a7-8217-9cab625994fe

Давайте придадим этому приложению индивидуальность, настроив стиль текста. FlutterFlow позволяет полностью контролировать стиль шрифта во всем приложении. Нет необходимости менять шрифты для каждого отдельного виджета — просто перейдите в раздел Typography и выполните настройку шрифтов для всего приложения.

Видео:https://www.loom.com/share/6870d896ba3745369d883abd207f844f?sid=7041763e-1cdf-4d27-b197-6775a2657ee9

Настроить внешний вид приложения можно, изменив цвета в меню Настройки темы > Цвета. Кроме того, здесь можно установить темный или светлый цвет темы.

По умолчанию поддержка темной темы уже включена, и цвета установлены соответствующим образом. Остается только предоставить пользователям возможность изменить тему. Теперь, когда вы знаете, как добавить действие, вы можете добавить кнопку в приложение, а затем добавить действие ‘Set Dark Mode Setting’.

Видео:https://www.loom.com/share/19698b96ce00467e90dde80b1b61b02a?sid=3c19a2b1-7b58-47de-825d-d6207458f496

На этом этапе мы добавим все необходимые данные и логику, чтобы приложение стало функциональным.

Для каждого места мы отображаем его название, изображение, рейтинг и статус избранного. Чтобы хранить эту информацию для каждого места, мы можем создать пользовательский тип данных с именем «место» и добавить в него эти поля.

Вот как он выглядит после добавления:

Переменная состояния приложения доступна во всем приложении. Создадим ее с именем ‘places’, используя тип данных ‘place’ (созданный на предыдущем шаге). Она будет использоваться для хранения списка мест.

После создания можно добавить некоторые данные о местах, нажав на кнопку «Tap to Edit Fields».

Вот как она выглядит:

Для отображения мест на виджете списка Список необходимо сначала сгенерировать дочерние элементы из переменной, а затем вывести данные на виджет с помощью пункта меню Set from Variable > [generate_children_from_variable_name]. Установите значение Available Options (Доступные параметры) в поле Data Structure Field (Структура данных) > Field to display data from (Поле для отображения данных).

Видео:https://www.loom.com/share/37aa1a5416984c4ea720437cea21934d?sid=140fcae2-053f-472a-863e-62f7879d3e97

Добавим условие, определяющее, отмечено ли место как любимое или нет. Внутри виджета ConditionalBuilder (добавленного в шаге 2.1) > раздел IF > выберите Unset > элемент [generate_children_from_variable_name] > поле структуры данных > имя поля (в котором хранится статус избранного, т.е. ‘is_favorite’).

Видео:https://www.loom.com/share/05b9ac6654c74cdaaff5b55d890dad5d?sid=ba9e596a-51df-4fd7-ba4c-855d0329c842

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

Видео:https://www.loom.com/share/a1f0f94e672f413cb995997324cdd3b7?sid=6736a6de-9e86-46db-bcb1-ed55ef7569e5

Инструкция по отображению мест на странице «Избранное» в основном аналогична странице «Главная» (см. шаг 4.3). Основное отличие заключается в том, что на странице «Избранное» необходимо отфильтровать места и отобразить только те, которые были отмечены как избранные.

Вот как это делается:

Видео:https://www.loom.com/share/2811539bb201435abe4a6056278cdfc6?sid=4d634a72-4d41-484d-a91d-17bd88a643b0

Теперь пришло время запустить приложение и посмотреть, как оно работает. FlutterFlow позволяет протестировать полнофункциональную версию приложения в режиме Run. Обычно режим Run занимает около 2-4 минут (или больше, в зависимости от размера проекта). Однако, чтобы увидеть изменения сразу, можно запустить приложение в режиме тестирования, который использует функцию Flutter «Hot Reload».

Видео:https://www.loom.com/share/2811539bb201435abe4a6056278cdfc6?sid=4d634a72-4d41-484d-a91d-17bd88a643b0

Перед вами полный рабочий образец этого проекта.

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

Это приложение можно подключить к базам данных Firebase, Supabase или собственному источнику данных через API.

Вы можете подключить это приложение к базам данных Firebase, Supabase или собственному источнику данных через API.

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

Вот как это выглядит:

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

Видео:https://www.loom.com/share/a2b6518cb3ef41e496051e2b8dd39104?sid=82fec131-ad96-41a9-bdf9-eb7e74ecf445

Вот как это делается:

Видео:https://www.loom.com/share/d3b3e88e29334c798e84e21ad3007a2c?sid=5803c0f9-f2f5-4c7a-92a8-176ac8186fa9

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

Вот как выглядит этот пример приложения при публикации в Web:

Видео:https://www.loom.com/share/4bcfb482c4ce4c4d9386aa901946dd11?sid=e537fec9-7c7d-4158-9449-aa27b066c69f

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