DEV Community

Play Button Pause Button
Alexandre Freire
Alexandre Freire

Posted on

Flutter StreamBuilder

What is the StreamBuilder Widget? It's a means to respond to an asynchronous procession of data. A StreamBuilder Widget is a StatefulWidget, and so is able to keep a 'running summary' and or record and note the 'latest data item' from a stream of data.

  • Stateful: A stateful widget is a widget that describes part of the user interface by building a constellation of other widgets that describe the user interface more concretely. The building process continues recursively until the description of the user interface is fully concrete (e.g., consists entirely of RenderObjectWidgets, which describe concrete RenderObjects).

Example:

Stream<int> _bids = (() async* {
  await Future<void>.delayed(Duration(seconds: 1));
  yield 1;
  await Future<void>.delayed(Duration(seconds: 1));
})();

Widget build(BuildContext context) {
  return DefaultTextStyle(
    style: Theme.of(context).textTheme.headline2,
    textAlign: TextAlign.center,
    child: Container(
      alignment: FractionalOffset.center,
      color: Colors.white,
      child: StreamBuilder<int>(
        stream: _bids,
        builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
          List<Widget> children;
          if (snapshot.hasError) {
            children = <Widget>[
              Icon(
                Icons.error_outline,
                color: Colors.red,
                size: 60,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 16),
                child: Text('Error: ${snapshot.error}'),
              )
            ];
          } else {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
                children = <Widget>[
                  Icon(
                    Icons.info,
                    color: Colors.blue,
                    size: 60,
                  ),
                  const Padding(
                    padding: EdgeInsets.only(top: 16),
                    child: Text('Select a lot'),
                  )
                ];
                break;
              case ConnectionState.waiting:
                children = <Widget>[
                  SizedBox(
                    child: const CircularProgressIndicator(),
                    width: 60,
                    height: 60,
                  ),
                  const Padding(
                    padding: EdgeInsets.only(top: 16),
                    child: Text('Awaiting bids...'),
                  )
                ];
                break;
              case ConnectionState.active:
                children = <Widget>[
                  Icon(
                    Icons.check_circle_outline,
                    color: Colors.green,
                    size: 60,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Text('\$${snapshot.data}'),
                  )
                ];
                break;
              case ConnectionState.done:
                children = <Widget>[
                  Icon(
                    Icons.info,
                    color: Colors.blue,
                    size: 60,
                  ),
                  Padding(
                    padding: const EdgeInsets.only(top: 16),
                    child: Text('\$${snapshot.data} (closed)'),
                  )
                ];
                break;
            }
          }

          return Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: children,
          );
        },
      ),
    ),
  );
}

Enter fullscreen mode Exit fullscreen mode

Top comments (0)