流行的跨平台框架 Flutter 为开发人员提供了两个强大的小部件来处理异步操作：StreamBuilder 和 FutureBuilder。尽管它们有相似之处，但了解它们的不同之处，以便为您的特定用例选择合适的一个是至关重要的。在这篇博文中，我们将深入研究这两个小部件的特性和用法，让您全面了解何时使用它们。

FutureBuilder 简介

首先，让我们探索 FutureBuilder ，它是为处理将来返回单个值的异步操作而设计的。请按照以下步骤来利用 FutureBuilder 的强大功能：

1. 当您有一个返回值的一次性异步操作（例如 HTTP 请求或从文件中读取）时，请使用 FutureBuilder 。
2. 导入所需的依赖项：import 'dart:async'; 。
3. 创建一个 Future 对象来表示您要执行的异步操作。例如，您可以使用 http.get() 发出 HTTP 请求并获取响应。
4. 将取决于未来结果的 UI 部分包装在 FutureBuilder 小部件内。

你最好理解这些代码。

打开您的 main.dart 文件并执行此代码，看看输出结果如何。

import 'package:flutter/material.dart';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@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('StreamBuilder VS FutureBuilder',style: TextStyle(fontSize: 18,color: Colors.black),),centerTitle: true,),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[_buildFutureBuilder(),],),);}// constructing FutureBuilderWidget _buildFutureBuilder() {return Center(child: FutureBuilder<int>(future: _calculateSquare(10),builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.done)return Text("Square = ${snapshot.data}",style: TextStyle(fontSize: 20,color: Colors.purple),);return CircularProgressIndicator(color: Colors.green,);},),);}// used by FutureBuilderFuture<int> _calculateSquare(int num) async {await Future.delayed(Duration(seconds: 5));return num * num;}}

输出：

StreamBuilder 简介

接下来，我们讨论 StreamBuilder ，它适合处理随着时间的推移产生多个值的异步操作。请按照以下步骤有效实施 StreamBuilder ：

1. 当您拥有可随时间变化的异步数据流（例如来自数据库或 Web 服务的实时更新）时，请使用 StreamBuilder 。
2. 导入所需的依赖项：import 'dart:async'; 。
3. 创建一个 Stream 对象来表示您要侦听的数据流。它可以是 StreamController 的实例，或者您可以使用 Stream.fromFuture 或 Stream.periodic 等内置流。
4. 将依赖于 StreamBuilder 小部件内的流数据的 UI 部分包装起来。

好的，如果您看到代码，那么您会更好地理解我在说什么

import 'package:flutter/material.dart';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@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('StreamBuilder VS FutureBuilder',style: TextStyle(fontSize: 18,color: Colors.black),),centerTitle: true,),body: Column(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[_buildStreamBuilder(),],),);}// constructing StreamBuilderWidget _buildStreamBuilder() {return Center(child: StreamBuilder<int>(stream: _stopwatch(),builder: (context, snapshot) {if (snapshot.connectionState == ConnectionState.active)return Text("Stopwatch = ${snapshot.data}",style: TextStyle(fontSize: 20,color: Colors.orange),);return CircularProgressIndicator();},),);}// used by StreamBuilderStream<int> _stopwatch() async* {while (true) {await Future.delayed(Duration(seconds: 1));yield _count++;}}
}

输出：

结论

总之， StreamBuilder 和 FutureBuilder 都是 Flutter 中重要的 widget，用于处理异步操作并根据结果数据更新 UI。

我希望你现在了解什么是 StreamBuilder 和 FutureBuilder，以及我们为什么和在哪里使用它们 ❤️❤️❤️。

---

原文：https://medium.com/@saurabhsinghaswal/what-is-difference-between-streambuilder-and-futurebuilder-in-flutter-2d6637583db1