FutureWidget

Einleitung

Das FutureWidget ist eine einfache Möglichkeit, Futures in Ihren Nylo Website-Projekten darzustellen. Es umschließt Flutters FutureBuilder und bietet eine übersichtlichere API mit integrierten Ladezuständen.

Während Ihr Future in Bearbeitung ist, wird ein Ladeindikator angezeigt. Sobald das Future abgeschlossen ist, werden die Daten über den child-Callback zurückgegeben.

Grundlegende Verwendung

Hier ist ein einfaches Beispiel für die Verwendung von FutureWidget:

// A Future that takes 3 seconds to complete
Future<String> _findUserName() async {
  await sleep(3); // wait for 3 seconds
  return "John Doe";
}

// Use the FutureWidget
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: SafeArea(
       child: FutureWidget<String>(
         future: _findUserName(),
         child: (context, data) {
           // data = "John Doe"
           return Text(data!);
         },
       ),
    ),
  );
}

Das Widget verarbeitet automatisch den Ladezustand für Ihre Benutzer, bis das Future abgeschlossen ist.

Ladezustand anpassen

Sie können das Erscheinungsbild des Ladezustands mit dem Parameter loadingStyle anpassen.

Normaler Ladestil

Verwenden Sie LoadingStyle.normal(), um ein Standard-Lade-Widget anzuzeigen. Sie können optional ein benutzerdefiniertes Kind-Widget bereitstellen:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.normal(
    child: Text("Loading..."), // custom loading widget
  ),
)

Wenn kein Kind-Widget angegeben wird, wird der Standard-App-Loader von Nylo Website angezeigt.

Skeletonizer-Ladestil

Verwenden Sie LoadingStyle.skeletonizer(), um einen Skeleton-Ladeeffekt anzuzeigen. Dies eignet sich hervorragend, um Platzhalter-UI anzuzeigen, die Ihrem Inhaltslayout entspricht:

FutureWidget<User>(
  future: _fetchUser(),
  child: (context, user) {
    return UserCard(user: user!);
  },
  loadingStyle: LoadingStyle.skeletonizer(
    child: UserCard(user: User.placeholder()), // skeleton placeholder
    effect: SkeletonizerEffect.shimmer, // shimmer, pulse, or solid
  ),
)

Verfügbare Skeleton-Effekte:

• SkeletonizerEffect.shimmer - Animierter Schimmer-Effekt (Standard)
• SkeletonizerEffect.pulse - Pulsierender Animationseffekt
• SkeletonizerEffect.solid - Einfarbiger Effekt

Kein Ladestil

Verwenden Sie LoadingStyle.none(), um den Ladeindikator vollständig auszublenden:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  loadingStyle: LoadingStyle.none(),
)

Fehlerbehandlung

Sie können Fehler von Ihrem Future mit dem onError-Callback behandeln:

FutureWidget<String>(
  future: _fetchData(),
  child: (context, data) {
    return Text(data!);
  },
  onError: (AsyncSnapshot snapshot) {
    print(snapshot.error.toString());
    return Text("Something went wrong");
  },
)

Wenn kein onError-Callback angegeben wird und ein Fehler auftritt, wird ein leeres SizedBox.shrink() angezeigt.

Parameter