Как показать «нет категорий» в FlutterFlow при пустом ответе API

При разработке приложений в FlutterFlow часто возникает ситуация, когда API возвращает пустой массив данных. Вместо пустого списка нужно вывести понятный пользователю текст, например «нет категорий». Разберём, как настроить Conditional Visibility для этой задачи.

Почему возникает проблема с пустым списком

Когда вы получаете данные через API Call с использованием JSON Body → Predefined Path, массив может содержать 0 элементов. По умолчанию ListView в FlutterFlow просто ничего не отображает, что путает пользователя. Нужно добавить логику проверки длины массива.

Пошаговая настройка Conditional Visibility

Шаг 1. Получите данные из API

Убедитесь, что ваш API запрос корректно возвращает данные. В FlutterFlow настройте API Call с методом GET или POST. В поле Body укажите путь к массиву, например categories.

Шаг 2. Создайте переменную для проверки

Добавьте Local State (например, categoriesList) и присвойте ему результат вызова API. Это позволит обращаться к данным в любом месте страницы.

Шаг 3. Настройте Conditional Visibility для виджета «Нет категорий»

Разместите на странице Text виджет с текстом «нет категорий». В свойствах виджета найдите Conditional Visibility и укажите условие: categoriesList.length == 0. Если условие истинно, текст будет показан.

Шаг 4. Настройте Conditional Visibility для ListView

Для самого ListView установите обратное условие: categoriesList.length > 0. Таким образом, когда данные есть - отображается список, когда данных нет - показывается текст.

Как обработать два ListView на одной странице

У вас на странице два ListView: первый для категорий, второй для статей. Если оба получают данные из одного API, проверяйте длину каждого массива отдельно. Например, для категорий используйте categoriesList.length == 0, для статей - articlesList.length == 0. Это гарантирует, что каждый список будет показывать свой текст при пустом ответе.

Альтернативные подходы

Вместо Conditional Visibility можно использовать Switch виджет, который переключается между состоянием «пусто» и «с данными». Однако первый способ проще для начинающих. Также вы можете обработать ошибки API и показать текст «Ошибка загрузки», если запрос не удался.

Возможные ошибки и их решение

• Условие не срабатывает: проверьте, что переменная categoriesList действительно является массивом, а не null. Используйте categoriesList?.length ?? 0 == 0.
• Текст не появляется: убедитесь, что Conditional Visibility включён и условие написано без опечаток.
• Данные приходят не сразу: добавьте Loading состояние, чтобы пользователь видел индикатор загрузки, пока API не вернёт ответ.

Заключение

Использование Conditional Visibility в FlutterFlow - эффективный способ управлять отображением контента при пустом ответе API. Следуя описанным шагам, вы легко реализуете вывод текста «нет категорий» и улучшите пользовательский опыт вашего приложения.