Poznaj FutureBuilder

Część sekcji Dane i sieć ścieżki Flutter w Coddy. Lekcja 6 z 27.

Większość ekranów wczytuje dane w chwili otwarcia, bez naciskania przycisku. Flutter ma widżet do wyświetlania przyszłego wyniku: FutureBuilder. Przekazujesz mu przyszły wynik, a on ponownie buduje ekran za każdym razem, gdy zmienia się jego stan.

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

snapshot pokazuje, jak wygląda przyszły wynik w tej chwili. Zanim pojawi się odpowiedź, snapshot.hasData ma wartość false, więc wyświetla się wskaźnik ładowania. Gdy odpowiedź nadejdzie, builder uruchamia się ponownie, a snapshot.data zawiera ciąg znaków.

snapshot.data ma typ String?: ciąg znaków lub null, ponieważ na początku nie ma żadnych danych. Znak ! po nim oznacza „sprawdzono, to nie jest null”. Używaj go tylko po sprawdzeniu hasData: jeśli wartością jest null, aplikacja ulegnie awarii.

W kodzie początkowym przyszły wynik jest już tworzony raz, w initState, które uruchamia się, gdy otwiera się ekran. late informuje Dart, że zmienna otrzyma tam wartość, zanim zostanie użyta. W następnej lekcji dowiesz się, dlaczego znajduje się właśnie tam.

Wyzwanie

Średni

Aplikacja ładuje wiadomość w initState, ale nigdy jej nie wyświetla. Zastąp zastępczy element Text elementem FutureBuilder<String> dla _message:

CircularProgressIndicator podczas ładowania
wiadomość w rozmiarze 24, gdy dotrze

Spróbuj swoich sił

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