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

FutureBuilder et StreamBuilder se comportent de manière similaire : ils écoutent les changements dans leurs objets respectifs. En réponse aux notifications de changement de valeur, une nouvelle construction est déclenchée.

En fin de compte, la différence réside dans la manière dont ils écoutent les appels asynchrones.

FutureBuilder

Il n'y a qu'une seule réponse à cela. Les futures sont couramment utilisés dans les appels http. Le Future peut être utilisé pour écouter l'état, par exemple, lorsqu'il a terminé la récupération des données ou s'il a rencontré une erreur.

comme par exemple le lien ici.

StreamBuilder

Contrairement aux streams, qui sont des itérateurs pouvant assimiler différentes valeurs, qui changeront avec le temps. Chaque nouvelle valeur est renvoyée par le Stream avec un message d'erreur ou un message de succès s'il en a un.

comme par exemple le lien ici.

Conclusion

Les données suivantes pourraient vous aider à mieux comprendre ce qui précède :

Si votre cas d'utilisation consiste simplement à obtenir les données et à les afficher, comme le nombre total de cours d'une classe à partir d'une API. Alors vous pouvez utiliser FutureBuilder. Et si les données se mettent à jour chaque seconde ou minute pendant que vous utilisez l'application, comme les futurs articles dans un blog ou l'augmentation des commentaires sur le blog ou l'augmentation des likes sur le blog. Elles se mettent à jour de manière asynchrone à intervalle régulier, dans ce cas StreamBuilder est la meilleure option. En fonction du cas d'utilisation, vous décidez lequel utiliser. Les deux sont bons à leur manière.

Answer 2

FutureBuilder

Il n'a qu'une seule réponse. Un usage très courant de flutter Future est lors des appels http. Ce que vous pouvez faire avec Future est d'écouter son état, c'est-à-dire, quand il est terminé ou a eu une erreur après la récupération des données via Future.

Dans le cas de FutureBuilder, nous lisons cette mise en garde dans la documentation Flutter :

Le futur doit avoir été obtenu auparavant, ..... Si le futur est créé en même temps que le FutureBuilder, alors à chaque reconstruction du parent de FutureBuilder, la tâche asynchrone sera relancée.

Dans de nombreux tutoriels, je vois quelque chose comme ceci :

FutureBuilder(
    future : foo.asyncMethod();
    builder : (context, snapshot){

    }
)

Ce n'est pas bon, car à chaque invocation du processus de construction, la méthode asynchrone est appelée et le constructeur de FutureBuilder est invoqué.

Si votre cas d'utilisation est simplement d'obtenir les données et de les afficher, comme le nombre total de cours d'une classe à partir de l'API. Alors vous pouvez utiliser FutureBuilder.

StreamBuilder

Les stream, en revanche, sont des itérateurs, qui peuvent assimiler différentes valeurs, qui changeront au fil du temps. En utilisant un stream, vous obtiendrez chaque nouvelle valeur et aussi s'il y a une erreur ou si c'est terminé avec un message de succès.

Et si les données se mettent à jour chaque seconde ou minute, pendant que vous utilisez l'application, comme les prochains articles dans un blog ou l'augmentation des commentaires sur le blog ou l'augmentation des likes sur le blog. Il se met à jour de manière asynchrone à intervalles réguliers, dans ce cas StreamBuilder est la meilleure option.

Answer 3

Voici un exemple complet mentionnant les deux cas. FutureBuilder résout une valeur carrée et retourne le résultat après 5 secondes, jusqu'à ce que nous montrions un indicateur de progression à l'utilisateur.

StreamBuilder affiche un chronomètre, incrémentant la valeur _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++;
    }
  }
}