Flutter StreamBuilder 与 FutureBuilder

Question

StreamBuilder 和 FutureBuilder 之间的主要区别是什么。

使用什么以及何时使用？
他们要执行的任务是什么？
他们每个人如何监听动态列表的变化？

Answer 1

StreamBuilder 和 FutureBuilder 具有相同的行为：它们监听各自对象的变化。并在收到通知时触发新构建的新价值。

所以说到底，他们的区别在于他们所听的对象是如何工作的。

Future 类似于 JS 中的 Promise 或 C# 中的 Task。它们是异步请求的表示。 Futures 有一个且只有一个回复。 Future 的一个常见用法是处理 HTTP 调用。您可以在 Future 上听到的是它的状态。无论是完成、成功完成还是出现错误。但仅此而已。

另一方面，

Stream 就像 JS 中的异步 Iterator。这可以被同化为一个可以随时间变化的值。它通常是网络套接字或事件（如点击）的表示。通过收听 Stream 您将获得每个新值以及 Stream 是否有错误或已完成。

How each of them listens to changes in a dynamic list?

A Future 无法监听变量变化。这是一次性的回应。相反，您需要使用 Stream.

Answer 2

FutureBuilder 用于一次性响应，如从相机拍摄图像、从本机平台获取数据一次（如获取设备电池）、获取文件引用、发出 http 请求等。

另一方面，StreamBuilder 用于多次获取某些数据，例如监听位置更新、播放音乐、秒表等。

这里是提及这两种情况的完整示例。

FutureBuilder 求解平方值，returns 5 秒后得出结果，直到那时我们向用户显示进度指示器。

StreamBuilder 显示秒表，每秒将 _count 值递增 1。

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

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

class _HomePageState extends State<HomePage> {
  int _count = 0; // used by StreamBuilder

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

  // constructing FutureBuilder
  Widget _buildFutureBuilder() {
    return Center(
      child: FutureBuilder<int>(
        future: _calculateSquare(10),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done)
            return Text("Square = ${snapshot.data}");

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

  // used by FutureBuilder
  Future<int> _calculateSquare(int num) async {
    await Future.delayed(Duration(seconds: 5));
    return num * num;
  }

  // constructing StreamBuilder
  Widget _buildStreamBuilder() {
    return Center(
      child: StreamBuilder<int>(
        stream: _stopwatch(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.active)
            return Text("Stopwatch = ${snapshot.data}");

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

  // used by StreamBuilder
  Stream<int> _stopwatch() async* {
    while (true) {
      await Future.delayed(Duration(seconds: 1));
      yield _count++;
    }
  }
}

Answer 3

我发现有时现实世界的类比在解释/记忆概念方面效果很好。这是一个 - 它并不完美，但对我有帮助。

假设您身处现代寿司餐厅之一，那里有一条腰带绕着房间转，上面放着寿司船。你只要坐下来等一个人经过，拿起它就可以吃。但他们也允许您订购执行。

A Future 就像你点外卖时他们给你的带有数字的代币；您提出了请求，但结果尚未准备好，但您有一个占位符。结果准备好后，您会收到回电（外卖柜台上方的数字板显示您的号码，或者他们会大声喊出来）-您现在可以进去拿食物（结果）外卖。

A Stream 就像那条带小寿司碗的腰带。通过在 table 处坐下，您已经 "subscribed" 进入了信息流。你不知道下一艘寿司船什么时候到达——但当厨师（消息源）将它放在流（带）中时，订阅者就会收到它。需要注意的重要一点是它们是异步到达的（你不知道下一个 boat/message 什么时候到来）但它们会按顺序到达（即，如果厨师将三种寿司按某种顺序放在传送带上-- 你会看到它们以相同的顺序出现）

从编码的角度来看——Futures 和 Streams 都可以帮助你处理异步（事情不会立即发生，你不知道什么时候你会得到一个请求后的结果）。

区别在于 Futures 是一次性的 request/response（我问，有延迟，我收到通知说我的 Future 已准备好收集，我已经完成了！）而 Streams是对单个请求的一系列连续响应（我问，有延迟，然后我不断收到响应，直到流干涸或我决定关闭它并走开）。

希望对您有所帮助。

Answer 4

FutureBuilder

它只有一个响应。 Flutter Future 的一个非常常见的用法是在 http 调用期间。你可以用 Future 做的是听它的状态，也就是说，当它完成时或在通过 Future

完成获取数据后出现错误

对于 FutureBuilder，我们在 Flutter 文档中读到了这条警告：

future肯定早就拿到了，..... 如果 Future 与 FutureBuilder 同时创建，那么每次FutureBuilder的parent重建时，异步任务都会重启。

在许多教程中，我看到这样的内容：

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

    }
)

这不好，因为每次调用构建过程时都会调用异步方法并调用 FutureBuilder 的构建器。

如果您的用例只是获取数据并显示它，例如 API 中 class 的课程总数。然后你可以使用 FutureBuilder.

StreamBuilder

Stream 是 Iterators，它可以吸收不同的值，这些值会随着时间的推移而变化。通过使用 Stream，您将获得每个新值，如果它有一些错误或者它完成了一个成功消息

如果，当您使用该应用程序时，数据每秒或每分钟更新一次，例如博客中即将发布的帖子或增加对博客的评论或增加对博客的喜欢。它以一定的间隔异步更新，在这种情况下 StreamBuilder 是最好的选择。

Flutter StreamBuilder 与 FutureBuilder

Flutter StreamBuilder vs FutureBuilder

flutter

dart

flutter-futurebuilder

flutter-streambuilder