Виджет FutureBuilder

FutureBuilder — это специальный виджет во Flutter, который позволяет асинхронно отображать данные из Future. Он отслеживает состояние будущего результата (загрузка, успешное выполнение или ошибка) и обновляет интерфейс в зависимости от этого состояния.

Основная идея работы с FutureBuilder

Когда мы работаем с асинхронными операциями (например, загрузка данных через сеть), нам нужно каким-то образом показывать пользователю текущий статус: загружаются данные, есть ли ошибка или данные уже получены. FutureBuilder делает это за нас, автоматически перестраивая интерфейс в зависимости от текущего состояния выполнения Future.

Синтаксис FutureBuilder

FutureBuilder<T>(
  future: Future<T>?,  // Ваше Future
  builder: (BuildContext context, AsyncSnapshot<T> snapshot) {
    // Логика отображения на основе состояния Future
    return Widget;
  },
)

Параметры:

1. future: принимает Future, который должен быть выполнен. Этот Future возвращает данные асинхронно, например, результат HTTP-запроса.
2. builder: функция, которая строит виджеты в зависимости от текущего состояния Future. Она принимает два параметра:
   • context: стандартный контекст виджета.
   • snapshot: объект типа AsyncSnapshot, который содержит текущее состояние и данные (или ошибки) от Future.

Структура AsyncSnapshot

AsyncSnapshot — это объект, который предоставляет данные о текущем состоянии Future. Он имеет несколько важных свойств:

• snapshot.connectionState: показывает текущее состояние соединения. Возможные значения:
  • ConnectionState.none: Future еще не был запущен.
  • ConnectionState.waiting: Future в процессе выполнения (например, идет загрузка данных).
  • ConnectionState.active: Future активно выполняется (обычно для потоков).
  • ConnectionState.done: Future завершен (успешно или с ошибкой).
• snapshot.hasData: возвращает true, если данные успешно получены.
• snapshot.hasError: возвращает true, если произошла ошибка.
• snapshot.data: содержит данные, если Future выполнен успешно.
• snapshot.error: содержит информацию об ошибке, если произошел сбой.

Пример работы FutureBuilder

Вот пример использования FutureBuilder, который мы использовали для загрузки списка постов из API:

FutureBuilder<List<Post>>(
  future: futurePosts,  // Ваш Future, который загружает данные
  builder: (context, snapshot) {
    // Проверяем текущее состояние
    if (snapshot.connectionState == ConnectionState.waiting) {
      // Показываем индикатор загрузки
      return Center(child: CircularProgressIndicator());
    } else if (snapshot.hasError) {
      // Если произошла ошибка, показываем сообщение об ошибке
      return Center(child: Text('Ошибка: ${snapshot.error}'));
    } else if (snapshot.hasData) {
      // Если данные успешно получены, строим список постов
      return ListView.builder(
        itemCount: snapshot.data!.length,
        itemBuilder: (context, index) {
          Post post = snapshot.data![index];
          return ListTile(
            title: Text(post.title),
            subtitle: Text(post.body),
          );
        },
      );
    } else {
      // Если данных нет, показываем сообщение об этом
      return Center(child: Text('Нет данных'));
    }
  },
)

Как работает этот код:

1. Загрузка данных (ConnectionState.waiting): пока данные не загружены, отображается индикатор загрузки (CircularProgressIndicator).
2. Ошибка (snapshot.hasError): если при выполнении запроса произошла ошибка, показывается сообщение с описанием ошибки.
3. Успех (snapshot.hasData): если данные успешно загружены, они отображаются в виде списка (ListView).
4. Нет данных: если по каким-то причинам данные не пришли, отображается сообщение о том, что данных нет.

Особенности FutureBuilder

• Одноразовое использование Future: если Future был запущен и выполнен, он не будет повторно выполняться. Чтобы повторно вызвать Future при изменении состояния, нужно обновить состояние через вызов setState или использовать StreamBuilder для постоянных потоков данных.
• Удобство управления состоянием: FutureBuilder самостоятельно управляет перерисовкой экрана в зависимости от состояния Future.

Таким образом, FutureBuilder — это удобный способ интеграции асинхронных операций с интерфейсом Flutter, обеспечивающий автоматическое обновление UI на основе состояния асинхронных запросов.