FlutterFlow Wiki

Лоадеры и Шиммеры (Состояния загрузки)

1 min read

⏳ Состояния загрузки (Loaders & Shimmers)

Качественные индикаторы загрузки делают ожидание менее утомительным и предотвращают ощущение “зависшего” приложения.

🏁 Кастомный лоадер при запуске (Splash Screen)

Чтобы заменить стандартный белый экран при загрузке Flutter Web на красивую анимацию:

  1. Выберите анимацию на loading.io.
  2. Добавьте CSS-стили и HTML-код лоадера в Settings → Web Deployment → Custom Headers.
  3. Используйте скрипт для скрытия лоадера после того, как Flutter отрисует первый кадр:
window.addEventListener("flutter-first-frame", function () {
  const splashScreen = document.getElementById("splash-screen")
  if (splashScreen) {
    splashScreen.style.opacity = "0"
    setTimeout(() => splashScreen.remove(), 500)
  }
})

✨ Skeleton Loading (Шиммеры)

Вместо крутящегося индикатора для списков лучше использовать “скелетную” загрузку (Shimmer effect). Это создает иллюзию того, что контент уже почти загружен.

  • Как сделать: Создайте серый полупрозрачный макет вашей карточки и анимируйте его прозрачность или градиент.
  • 📺 Урок: Custom Skeleton Loading States in FlutterFlow

💡 Советы

  • Используйте лоадеры только там, где загрузка длится более 300мс.
  • Шиммеры лучше подходят для контента (новости, товары), а лоадеры-кольца — для действий (отправка формы).

Смотрите также: Библиотеки анимаций

Graph View