Знакомство с FutureBuilder

Часть раздела Данные и сеть путешествия по Flutter на Coddy. Урок 6 из 27.

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

FutureBuilder<String>(
  future: _message,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data!);
    }
    return const CircularProgressIndicator();
  },
)

snapshot показывает, как выглядит асинхронная операция в данный момент. Пока ответ не пришёл, snapshot.hasData равно false, поэтому отображается индикатор загрузки. Когда ответ приходит, функция builder запускается снова, и snapshot.data содержит строку.

Тип snapshot.data — String?: строка или null, потому что сначала данных нет. Символ ! после него означает: «Я проверил — это не null». Используйте его только после hasData: если значение равно null, приложение завершится с ошибкой.

В стартовом коде асинхронная операция уже создаётся один раз в initState, который запускается при открытии экрана. late сообщает Dart, что переменная получит значение там, прежде чем будет использована. В следующем уроке объясняется, почему она находится именно там.

Задание

Средне

Приложение загружает сообщение в initState, но никогда его не показывает. Замени заглушку Text на FutureBuilder<String> для _message:

CircularProgressIndicator, пока оно загружается
сообщение размером 24, когда оно загрузится

Попробуйте сами

import 'package:flutter/material.dart';

import 'api.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MessageScreen(),
    );
  }
}

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

  @override
  State<MessageScreen> createState() => _MessageScreenState();
}

class _MessageScreenState extends State<MessageScreen> {
  late Future<String> _message;

  @override
  void initState() {
    super.initState();
    _message = fetch('/message');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: const Text('The message goes here', style: TextStyle(fontSize: 24)),
      ),
    );
  }
}