FutureBuilder kennenlernen

Teil des Abschnitts Daten und Netzwerk der Flutter-Journey von Coddy. Lektion 6 von 27.

Die meisten Bildschirme laden ihre Daten, sobald sie geöffnet werden, ganz ohne Schaltfläche. Flutter hat ein Widget, um einen Future anzuzeigen: FutureBuilder. Du übergibst ihm den Future, und es baut den Bildschirm jedes Mal neu auf, wenn sich der Zustand des Futures ändert.

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

Der snapshot zeigt, wie der Future gerade aussieht. Bevor die Antwort eintrifft, ist snapshot.hasData false, daher wird der Ladekreisel angezeigt. Wenn sie eintrifft, wird der Builder erneut ausgeführt und snapshot.data enthält den String.

snapshot.data hat den Typ String?: ein String oder null, weil anfangs keine Daten vorhanden sind. Das ! danach bedeutet: „Ich habe geprüft, es ist nicht null.“ Verwende es nur nach hasData: Bei einem null stürzt die App ab.

Der Starter erstellt den Future bereits einmal in initState, das ausgeführt wird, wenn der Bildschirm geöffnet wird. late teilt Dart mit, dass die Variable dort ihren Wert erhält, bevor sie verwendet wird. Die nächste Lektion zeigt, warum er dort angelegt wird.

Aufgabe

Mittel

Die App lädt die Nachricht in initState, zeigt sie aber nie an. Ersetze den Platzhalter Text durch einen FutureBuilder<String> für _message:

einen CircularProgressIndicator, während sie geladen wird
die Nachricht in Größe 24, sobald sie eintrifft

Probier es selbst

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

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Daten und Netzwerk

Übe selbstständig: Online-Flutter-Compiler