Виджет FutureBuilder

Виджет FutureBuilder подписывается на future и вызывает builder с AsyncSnapshot. Пока Future не завершён, snapshot несёт ConnectionState.waiting. initialData задаёт данные до первого кадра.

Синтаксис

FutureBuilder<T>(
	future: future,
	initialData: initialData,
	builder: (context, snapshot) {
		return Text('abcde');
	},
)

Параметры

Параметр	Описание
`future`	Асинхронная задача, результат которой ждут.
`builder`	Строит виджет по `AsyncSnapshot`.
`initialData`	Необязательное значение до завершения future.

Пример

Давайте дождёмся строки из Future:

import 'package:flutter/material.dart';

Future<String> loadLabel() async {
	await Future<void>.delayed(const Duration(milliseconds: 50));
	return 'abcde';
}

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: FutureBuilder<String>(
						future: loadLabel(),
						builder: (context, snapshot) {
							if (snapshot.connectionState == ConnectionState.waiting) {
								return const Text('12345');
							}
							return Text(snapshot.data ?? 'empty');
						},
					),
				),
			),
		),
	);
}

На экране сначала мелькнет '12345', затем FutureBuilder покажет 'abcde'.

Пример

Давайте зададим initialData у FutureBuilder:

import 'package:flutter/material.dart';

Future<String> slowLabel() async {
	await Future<void>.delayed(const Duration(seconds: 1));
	return '12345';
}

void main()
{
	runApp(
		MaterialApp(
			home: Scaffold(
				body: Center(
					child: FutureBuilder<String>(
						future: slowLabel(),
						initialData: 'abcde',
						builder: (context, snapshot) {
							return Text(snapshot.data ?? 'empty');
						},
					),
				),
			),
		),
	);
}

На экране FutureBuilder сразу покажет 'abcde' из initialData.

Смотрите также

виджет StreamBuilder,
который слушает Stream вместо Future
класс AsyncSnapshot,
который передают в builder
перечисление ConnectionState,
которое описывает стадию future
виджет ValueListenableBuilder,
который обновляет UI по ValueListenable