FutureBuilder для Future в Flutter

Когда результат асинхронной операции нужен прямо в дереве виджетов, используют FutureBuilder. Ему передают future и builder, который строит UI по снимку AsyncSnapshot.

Пока snapshot.connectionState равен ConnectionState.waiting, показывают индикатор. Когда snapshot.hasData, выводят snapshot.data. Так не нужно вручную вызывать setState после каждого Future. Сам Future создаётся один раз в initState, не как future: load() в build:

import 'package:flutter/material.dart';

void main() {
	runApp(const MaterialApp(home: FutureBuilderDemoPage()));
}

class FutureBuilderDemoPage extends StatefulWidget {
	const FutureBuilderDemoPage({super.key});

	@override
	State<FutureBuilderDemoPage> createState() =>
		_FutureBuilderDemoPageState();
}

class _FutureBuilderDemoPageState extends State<FutureBuilderDemoPage> {
	late final Future<String> greeting;

	@override
	void initState() {
		super.initState();
		greeting = Future<String>.delayed(
			const Duration(seconds: 1),
			() => 'Hello from Future',
		);
	}

	@override
	Widget build(BuildContext context) {
		return Scaffold(
			appBar: AppBar(title: const Text('FutureBuilder')),
			body: Center(
				child: FutureBuilder<String>(
					future: greeting,
					builder: (context, snapshot) {
						if (snapshot.connectionState == ConnectionState.waiting) {
							return const CircularProgressIndicator();
						}
						if (snapshot.hasData) {
							return Text(
								snapshot.data!,
								style: const TextStyle(fontSize: 22),
							);
						}
						return const Text('No data');
					},
				),
			),
		);
	}
}

Покажите число '42' через FutureBuilder. Задержку в 2 секунды создайте один раз в initState, не внутри build. Пока ответ не пришёл, в Column выведите текст 'Counting...' и индикатор.