Значение, которое появится позже

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

До сих пор всё в ваших приложениях происходило сразу: вы нажимаете кнопку — экран меняется. Реальные приложения часто ждут. Они ждут ответа от сервера, загрузки файла или окончания таймера.

Dart называет значение, которого ещё нет, Future. Самый простой вариант — Future.delayed: он ждёт заданный промежуток времени Duration, а затем запускает переданную ему функцию.

Future.delayed(const Duration(seconds: 2), () {
  setState(() {
    message = 'Done';
  });
});

Пока приложение ждёт, оно не зависает. Экран продолжает отрисовываться, а кнопки продолжают работать. Когда проходят 2 секунды, Dart запускает функцию, а setState перерисовывает экран, показывая новое сообщение.

Задание

Легко

Нажатие на Boil water сразу показывает Tea is ready. Вода требует времени. Сделай так, чтобы сообщение менялось через 3 секунды после нажатия, используя Future.delayed.

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

import 'package:flutter/material.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: TeaScreen(),
    );
  }
}

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

  @override
  State<TeaScreen> createState() => _TeaScreenState();
}

class _TeaScreenState extends State<TeaScreen> {
  String message = 'The water is cold';

  void boil() {
    setState(() {
      message = 'Tea is ready';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(message, style: const TextStyle(fontSize: 28)),
            const SizedBox(height: 24),
            ElevatedButton(onPressed: boil, child: const Text('Boil water')),
          ],
        ),
      ),
    );
  }
}