Быстрый старт

Это короткое практическое упражнение знакомит с основными понятиями FlutterFlow. Вы соберёте счётчик количества товара — блок, которым покупатель выбирает, сколько единиц добавить в корзину.

Вот что получится в итоге:

Чему вы научитесь

• Собирать вёрстку из виджетов.
• Настраивать их оформление.
• Добавлять интерактивность через действия.
• Хранить состояние страницы и менять его в ответ на действия пользователя.
• Запускать и проверять приложение.

Порядок работы:

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

1. Стартовый проект

Чтобы не тратить время на подготовку экрана, возьмите готовый проект. Откройте проект FlutterFlow Quickstart, нажмите Clone — копия появится в вашем аккаунте.

Если хотите начать с пустого проекта, посмотрите статью Создание проекта.

После клонирования вы увидите страницу с фотографиями товара и описанием. К ней вы и добавите выбор количества.

2. Интерфейс

Счётчик собирается в дереве виджетов страницы товара из обычных элементов вёрстки и отображения.

1. Откройте страницу товара и найдите блок под описанием.
2. Добавьте Container — в нём будет жить счётчик.
3. Внутрь контейнера положите Row.
4. Добавьте виджет Text с подписью «Quantity».
5. Добавьте элементы управления: уменьшение, текущее значение, увеличение.
6. Расположите виджеты так, чтобы подпись была слева, а счётчик — справа.

3. Стили

Теперь приведите счётчик к оформлению остальной страницы. Настройки выделенного виджета живут в панели свойств.

1. Настройте отступы и выравнивание у Row.
2. Выделите контейнер счётчика и задайте фон, внутренние отступы, размеры и скругление углов.
3. Оформите подпись «Quantity» и значение так, чтобы их было легко читать.
4. Подберите иконки, цвета и размеры для кнопок уменьшения и увеличения.
5. Сравните результат с превью из начала статьи и доведите мелочи.

4. Состояние

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

4.1. Переменная состояния

Добавьте переменную состояния страницы, в которой будет храниться количество:

1. Выделите корневой виджет страницы в дереве виджетов.
2. Откройте настройки состояния страницы и добавьте новое поле.
3. Назовите его quantity, тип — Integer, начальное значение — 1.
4. Выделите виджет Text, который показывает количество.
5. Возьмите его значение из Page State > quantity.

4.2. Изменение переменной

Значение quantity меняют действия на кнопках:

1. Выделите кнопку увеличения и добавьте действие On Tap.
2. Выберите Update Page State, укажите quantity и задайте ему текущее значение плюс 1.
3. Выделите кнопку уменьшения и добавьте такое же действие On Tap.
4. Задайте quantity текущее значение минус 1.
5. Убедитесь, что обе кнопки меняют текст, привязанный к quantity.

5. Запуск

Проверить работу счётчика быстрее всего в Test Mode: FlutterFlow поднимает веб-версию приложения и подтягивает в неё изменения из конструктора.

1. Выберите Test Mode в меню слева.
2. Дождитесь запуска тестовой сессии.
3. Понажимайте «плюс» и «минус» — количество на экране должно меняться.

Есть и Run Mode: он собирает полноценную сборку с реальными данными, которой можно поделиться с участниками проекта. Сборка занимает больше времени и hot reload в ней не работает, поэтому для быстрой проверки правок она не годится.

Готово — первое приложение на FlutterFlow собрано.

Проверьте себя

Прежде чем идти дальше, убедитесь, что:

• начальное количество отображается верно;
• кнопка увеличения увеличивает значение;
• кнопка уменьшения уменьшает его;
• вёрстка не съезжает при смене значения;
• всё это работает в Test Mode.

Что дальше

Продолжить стоит с этих статей:

• Сборка вёрстки
• Обзор виджетов
• Состояние страницы
• Редактор действий
• Запуск и проверка приложения

Если что-то не работает

Пройдите шаги ещё раз и сверьте настройку каждого виджета и действия с описанием выше — почти все затыки на этом этапе сводятся к пропущенному шагу.

Если это не помогло, задайте вопрос на форуме сообщества или напишите в поддержку FlutterFlow.