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

Метод 1: использование нескольких FutureBuilder
Вы можете использовать несколько экземпляров виджета FutureBuilder для обработки нескольких фьючерсов в приложении Flutter. Каждый FutureBuilder можно связать с различным будущим и соответствующим образом обновить пользовательский интерфейс. Вот пример:

Future<int> fetchNumber() async {
  await Future.delayed(Duration(seconds: 2));
  return 42;
}
Future<String> fetchMessage() async {
  await Future.delayed(Duration(seconds: 2));
  return "Hello, FutureBuilder!";
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        FutureBuilder<int>(
          future: fetchNumber(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Number: ${snapshot.data}');
            }
          },
        ),
        FutureBuilder<String>(
          future: fetchMessage(),
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return CircularProgressIndicator();
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return Text('Message: ${snapshot.data}');
            }
          },
        ),
      ],
    );
  }
}

Метод 2: объединение фьючерсов с Future.wait()
Если у вас есть несколько фьючерсов, которые необходимо разрешить одновременно, вы можете использовать метод Future.wait(), чтобы дождаться завершения всех фьючерсов.. Вот пример:

Future<int> fetchNumber() async {
  await Future.delayed(Duration(seconds: 2));
  return 42;
}
Future<String> fetchMessage() async {
  await Future.delayed(Duration(seconds: 2));
  return "Hello, FutureBuilder!";
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<List<dynamic>>(
      future: Future.wait([fetchNumber(), fetchMessage()]),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          int number = snapshot.data[0];
          String message = snapshot.data[1];
          return Column(
            children: [
              Text('Number: $number'),
              Text('Message: $message'),
            ],
          );
        }
      },
    );
  }
}

Метод 3: объединение фьючерсов в цепочку с помощью.then()
Вы также можете объединить несколько фьючерсов в цепочку, используя метод .then(). Это позволяет выполнять последовательные операции, в которых результат одного будущего используется в качестве входных данных для следующего будущего. Вот пример:

Future<int> fetchNumber() async {
  await Future.delayed(Duration(seconds: 2));
  return 42;
}
Future<String> fetchMessage(int number) async {
  await Future.delayed(Duration(seconds: 2));
  return "The number is $number";
}
class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder<int>(
      future: fetchNumber(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return CircularProgressIndicator();
        } else if (snapshot.hasError) {
          return Text('Error: ${snapshot.error}');
        } else {
          int number = snapshot.data;
          return FutureBuilder<String>(
            future: fetchMessage(number),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                String message = snapshot.data;
                return Text('Message: $message');
              }
            },
          );
        }
      },
    );
  }
}

В этой статье мы рассмотрели несколько методов обработки нескольких фьючерсов с помощью FutureBuilder во Flutter. Используя несколько FutureBuilder, комбинируя фьючерсы с помощью Future.wait() или объединяя фьючерсы в цепочку с помощью.then(), вы можете эффективно управлять асинхронными операциями и обновлять пользовательский интерфейс на основе состояния каждого фьючерса. Эти методы обеспечивают гибкость и контроль при обработке нескольких асинхронных задач в ваших приложениях Flutter.