Flutter StreamBuilder vs FutureBuilder

Question

Quelle est la principale différence entre StreamBuilder et FutureBuilder.

• Quand les utiliser et pourquoi?

• Quelles sont les tâches qu'ils sont censés effectuer?

• Comment chacun d'eux écoute les changements dans une liste dynamique?

Answer 1

À la fois StreamBuilder et FutureBuilder ont le même comportement : ils écoutent les changements sur leur objet respectif. Et déclenchent une nouvelle construction lorsqu'ils sont notifiés d'une nouvelle valeur.

Donc en fin de compte, leurs différences résident dans le fonctionnement de l'objet écouté.

Future est comme Promise en JS ou Task en c#. Ce sont la représentation d'une requête asynchrone. Les Futures ont une seule et unique réponse. Une utilisation courante de Future est de gérer les appels HTTP. Ce sur quoi vous pouvez écouter avec un Future est son état. S'il est terminé, fini avec succès, ou s'il y a eu une erreur. Mais c'est tout.

Stream en revanche est comme un Iterator asynchrone en JS. Cela peut être assimilé à une valeur qui peut changer au fil du temps. Il représente généralement les websockets ou les événements (comme les clics). En écoutant un Stream, vous obtiendrez chaque nouvelle valeur ainsi que si le Stream a rencontré une erreur ou est terminé.

Comment chacun d'eux écoute-t-il les changements dans une liste dynamique ?

Un Future ne peut pas écouter un changement de variable. C'est une réponse unique. Au lieu de cela, vous devrez utiliser un Stream.

Answer 2

FutureBuilder est utilisé pour une réponse ponctuelle, comme prendre une image de la caméra, obtenir des données une seule fois à partir de la plateforme native (comme récupérer la batterie de l'appareil), obtenir une référence de fichier, faire une requête http, etc.

D'autre part, StreamBuilder est utilisé pour récupérer des données plusieurs fois, comme écouter la mise à jour de la position, lire de la musique, un chronomètre, etc.

---

Voici un exemple complet mentionnant les deux cas.

FutureBuilder résout une valeur carrée et retourne le résultat après 5 secondes, en montrant un indicateur de progression à l'utilisateur en attendant.

StreamBuilder montre un chronomètre, augmentant la valeur de _count de 1 chaque seconde.

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State {
  int _count = 0; // utilisé par StreamBuilder

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          _buildFutureBuilder(),
          SizedBox(height: 24),
          _buildStreamBuilder(),
        ],
      ),
    );
  }

  // construction de FutureBuilder
  Widget _buildFutureBuilder() {
    return Center(
      child: FutureBuilder(
        future: _calculateSquare(10),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done)
            return Text("Carré = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // utilisé par FutureBuilder
  Future _calculateSquare(int num) async {
    await Future.delayed(Duration(seconds: 5));
    return num * num;
  }

  // construction de StreamBuilder
  Widget _buildStreamBuilder() {
    return Center(
      child: StreamBuilder(
        stream: _stopwatch(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.active)
            return Text("Chronomètre = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // utilisé par StreamBuilder
  Stream _stopwatch() async* {
    while (true) {
      await Future.delayed(Duration(seconds: 1));
      yield _count++;
    }
  }
}

Answer 3

Je trouve que parfois les analogies du monde réel fonctionnent bien pour expliquer / mémoriser des concepts. Voici une - ce n'est pas parfait mais cela m'aide.

Imaginez que vous êtes dans l'un de ces restaurants de sushi modernes où il y a un tapis roulant avec des assiettes de sushi qui défilent. Vous vous installez simplement et attendez qu'une passe devant vous, vous l'attrapez et la mangez. Mais vous pouvez aussi commander à emporter.

Un Future est comme le jeton avec un numéro qu'ils vous donnent lorsque vous commandez à emporter ; vous avez fait la demande, mais le résultat n'est pas encore prêt mais vous avez un espace réservé. Et quand le résultat est prêt, vous recevez un rappel (l'écran numérique au-dessus du comptoir des plats à emporter montre votre numéro ou ils le crient) - vous pouvez maintenant aller chercher votre nourriture (le résultat) à emporter.

Un Stream est comme ce tapis roulant portant des petits bols de sushi. En vous installant à cette table, vous vous êtes "abonné" au flux. Vous ne savez pas quand le prochain bateau de sushi arrivera - mais lorsque le chef (source du message) le place dans le flux (tapis roulant), alors les abonnés le recevront. La chose importante à noter est qu'ils arrivent de manière asynchrone (vous ne savez pas quand le prochain bateau/message arrivera) mais ils arriveront en séquence (c'est-à-dire, si le chef place trois types de sushi sur le tapis, dans un certain ordre - vous les verrez passer devant vous dans le même ordre).

D'un point de vue de la programmation - à la fois les Futures et les Streams vous aident à gérer l'asynchronisme (où les choses ne se produisent pas instantanément, et vous ne savez pas quand vous obtiendrez un résultat après avoir fait une demande).

La différence est que les Futures concernent une demande/réponse ponctuelle (je demande, il y a un délai, je reçois une notification que mon Future est prêt à être collecté, et c'est terminé!) tandis que les Streams sont une série continue de réponses à une seule demande (je demande, il y a un délai, puis je continue de recevoir des réponses jusqu'à ce que le flux se tarisse ou que je décide de le fermer et de m'en aller).

J'espère que cela vous aide.

Answer 4

Les widgets StreamBuilder et FutureBuilder dans Flutter vous permettent de construire des interfaces réactives qui répondent aux changements de données asynchrones. Cependant, ils présentent certaines différences en termes d'utilisation et du type de données avec lesquelles ils fonctionnent.

Le widget FutureBuilder est utilisé lorsque vous souhaitez récupérer de manière asynchrone une seule donnée qui ne changera pas dans le temps, comme une requête réseau pour les informations d'utilisateur. Il attend un Future comme source de données, et lorsque le Future est complet, il reconstruit l'arborescence du widget avec les données résultantes.

Le widget StreamBuilder, quant à lui, est utilisé lorsque vous voulez afficher des données qui peuvent changer dans le temps, comme une application de chat en temps réel. Il attend un Stream comme source de données, et à chaque nouvelle donnée disponible, il reconstruit l'arborescence du widget avec les données mises à jour.

Voici quelques autres différences :

FutureBuilder a un seul AsyncSnapshot qui représente l'état actuel du Future, tandis que StreamBuilder a plusieurs AsyncSnapshots, chacun représentant une nouvelle donnée émise par le Stream. FutureBuilder exécutera le Future à chaque fois que le widget est reconstruit, tandis que StreamBuilder ne s'abonnera au Stream qu'une seule fois lorsque le widget est monté, et se désabonnera lorsque le widget est supprimé. Voici un exemple d'utilisation de FutureBuilder :

FutureBuilder(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  },
);

Et voici un exemple d'utilisation de StreamBuilder :

StreamBuilder(
  stream: countStream(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      return Text('Compter : ${snapshot.data}');
    } else {
      return CircularProgressIndicator();
    }
  },
);

En résumé, FutureBuilder est utilisé pour la récupération de données asynchrones ponctuelles, tandis que StreamBuilder est utilisé pour afficher des données en continu mises à jour.

Answer 5

StreamBuilder et FutureBuilder sont tous deux des widgets qui peuvent être utilisés pour écouter les changements de données asynchrones dans Flutter. StreamBuilder est utilisé pour afficher des données qui sont constamment mises à jour, tandis que FutureBuilder est utilisé pour afficher des données qui sont récupérées une seule fois.

StreamBuilder écoute les changements dans un flux de données, tandis que FutureBuilder écoute l'état d'un Future. Cela signifie que StreamBuilder peut être utilisé pour afficher des données qui changent constamment, telles qu'un ticker boursier en direct, tandis que FutureBuilder ne peut être utilisé que pour afficher des données qui sont récupérées une seule fois, comme les résultats d'une requête réseau.

StreamBuilder est plus complexe à mettre en place que FutureBuilder, mais il est plus flexible et peut être utilisé pour afficher des données plus complexes.

En général, vous devez utiliser StreamBuilder lorsque vous avez besoin d'afficher des données qui sont constamment mises à jour, et FutureBuilder lorsque vous avez besoin d'afficher des données qui sont récupérées une seule fois.