Перезагрузка данных кнопкой

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

Чтобы загрузить свежие данные, передай FutureBuilder новое будущее. Создай его в setState, чтобы экран перестроился с ним:

IconButton(
  icon: const Icon(Icons.refresh),
  onPressed: () {
    setState(() {
      _tip = fetch('/tip');
    });
  },
)

Новая подсказка приходит через 2 секунды. Пока она загружается, snapshot.hasData остаётся равным true: сборщик сохраняет старые данные, пока их не заменят новые. При проверке hasData старая подсказка остаётся на экране, и ничто не показывает, что приложение работает.

Чтобы снова показать индикатор загрузки, проверь snapshot.connectionState — текущее состояние будущего. Оно равно ConnectionState.waiting, пока выполняется будущее, и ConnectionState.done, когда оно завершилось:

if (snapshot.connectionState == ConnectionState.waiting) {
  return const CircularProgressIndicator();
}
return Text(snapshot.data!);

Когда выполнение завершено, данные уже есть, поэтому snapshot.data! безопасно использовать.

Задание

Средне

Добавь кнопку обновления, которая загружает следующую подсказку:

IconButton с Icons.refresh в actions верхней панели
при нажатии присвой _tip новое значение fetch('/tip') внутри setState
во время загрузки новой подсказки отображается индикатор: проверь snapshot.connectionState

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

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: TipScreen(),
    );
  }
}

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

  @override
  State<TipScreen> createState() => _TipScreenState();
}

class _TipScreenState extends State<TipScreen> {
  late Future<String> _tip;

  @override
  void initState() {
    super.initState();
    _tip = fetch('/tip');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Tip of the Day'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: FutureBuilder<String>(
              future: _tip,
              builder: (context, snapshot) {
                if (snapshot.hasData) {
                  return Text(
                    snapshot.data!,
                    textAlign: TextAlign.center,
                    style: const TextStyle(fontSize: 24),
                  );
                }
                return const CircularProgressIndicator();
              },
            ),
        ),
      ),
    );
  }
}