Освоение Flutter: один раз запуск Future Builder – лучшие методы и примеры

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

Метод 1: использование логического флага.
Один из подходов заключается в использовании логического флага для управления выполнением Future Builder. Первоначально установите для флага значение false, а после завершения Future установите для него значение true. Оберните Future Builder в условный оператор, который проверяет значение флага перед выполнением функции построения. Вот пример:

bool _isDataLoaded = false;
Future<void> fetchData() async {
  // Simulating an asynchronous data fetch
  await Future.delayed(Duration(seconds: 2));
  // Set the flag to true to indicate data is loaded
  setState(() {
    _isDataLoaded = true;
  });
}
@override
Widget build(BuildContext context) {
  return _isDataLoaded
      ? FutureBuilder(
          future: fetchData(),
          builder: (context, snapshot) {
            // Build your UI using the fetched data
            return Container();
          },
        )
      : Container(); // Placeholder widget while data is loading
}

Метод 2: использование FutureProvider
Пакет провайдера во Flutter предоставляет удобный способ управления состоянием. Вы можете использовать FutureProvider для управления выполнением Future Builder. FutureProvider гарантирует, что Future вызывается только один раз, а результат кэшируется для последующих перестроений. Вот пример:

final fetchDataProvider = FutureProvider<void>((ref) async {
  // Simulating an asynchronous data fetch
  await Future.delayed(Duration(seconds: 2));
});
@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: context.read(fetchDataProvider.future),
    builder: (context, snapshot) {
      // Build your UI using the fetched data
      return Container();
    },
  );
}

Метод 3: использование FutureBuilder с ConnectionState
Перечисление ConnectionState во Flutter предоставляет информацию о состоянии соединения. Вы можете использовать это перечисление для запуска Future Builder только один раз, когда для состояния соединения установлено значение ConnectionState.done. Вот пример:

Future<void> fetchData() async {
  // Simulating an asynchronous data fetch
  await Future.delayed(Duration(seconds: 2));
}
@override
Widget build(BuildContext context) {
  return FutureBuilder(
    future: fetchData(),
    builder: (context, snapshot) {
      if (snapshot.connectionState == ConnectionState.done) {
        // Build your UI using the fetched data
        return Container();
      } else {
        // Placeholder widget while data is loading
        return CircularProgressIndicator();
      }
    },
  );
}

В этой статье мы рассмотрели несколько способов запуска Future Builder только один раз в вашем приложении Flutter. Внедряя эти методы, вы можете повысить производительность и удобство работы пользователей за счет сокращения ненужных перестроек. Независимо от того, решите ли вы использовать логический флаг, использовать возможности FutureProvider или ConnectionState, важно понимать компромиссы и выбирать подход, который лучше всего подходит для вашего конкретного случая использования. Приятного кодирования!